我是Vue.js的新手。这是我的问题:我试着这样做:
<li v-for="(msg,index) in system_message" :class="index">
为每个li元素创建不同的类名称,如0,1,2,3。但是v-bind不能这样工作。类名称保持为空。我如何在Vue中使用setAttribute函数?谢谢!
b4lqfgs41#
不接受数字作为类名,您应该使用如下字符串连接索引:
<li v-for="(msg,index) in system_message" :class="`item${index}`">
它给出了item0, item1, item2 ...
item0, item1, item2 ...
bvpmtnay2#
class属性不能是数字,您需要将其与字符串连接起来。请检查下面的代码片段中的两个示例:
new Vue({ render: h => h({ data() { return { system_message: ["Message 1", "Message 2", "Message 3"] } }, template: ` <div> <li v-for="(msg,index) in system_message" :class="index">{{msg}}</li> <li v-for="(msg,index) in system_message" :class="'class-'+index">{{msg}}</li> </div> ` }), }).$mount('#app');
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"></div>
2条答案
按热度按时间b4lqfgs41#
不接受数字作为类名,您应该使用如下字符串连接索引:
它给出了
item0, item1, item2 ...
bvpmtnay2#
class属性不能是数字,您需要将其与字符串连接起来。请检查下面的代码片段中的两个示例: