2016年12月10日 17:18:42 星期六

情景:

主要介绍 v-for 循环时对变量的处理方法

主要以table标签为例

1. 为 tr 标签动态添加属性

1 <tr v-for="item in items" v-bind:>
2 
3 //效果: <tr >

2.截取字符串

 1     <td>{{subTitle(item.title)}}</td>
 2     .....
 3     methods: {
 4             subTitle: function(val) {
 5                 if (val.length < 20) {
 6                     return val;
 7                 } else {
 8                     return val.substring(0, 20) + '...';
 9                 }
10             }
11         }

3.绑定事件

 1 <td><span v-bind:>删除</span></td>
 2 
 3 //显示效果: <td><span >删除</span></td>
 4 
 5 ....
 6 
 7 methods: {
 8     del: function (method, itemKey, itemValue) {
 9         abc(method, itemKey, itemValue); // 页面中定义的其它函数, 也可以在里边直接写逻辑
10     }
11 }
12 
13 ....

4.radio 默认选中

1 <template v-for="(item, index) in types">
2     <input type="radio" name="params" v-bind:value="item.type" v-model="article.type" > {{item.name}} &emsp;
3 </template>
4 
5 // 参数解释
6 // types: 所有的文章类型; article.type: 某篇文章的类型
7 // 当article.type == item.type 时radio被选中

 5.条件渲染(if-else)

1 <template v-for="(func, index) in item.method">
2     <template v-if="(index + 1) % 5 === 0"> //每四个换行, 注意是3个=号
3         <br>
4     </template>
5 
6     <input type="checkbox" v-bind:value="func.name" v-bind:title="func.name"> {{func.doc}}
7 </template>

 6. 调用函数处理样式: 注意, 在标签的属性中调用函数要把属性改写成 v-bind:class="" 或者简写 :class=""

 1 <tr v-for="(row, index) in list" :data-id="row.id" :class="classChange(row.status)">
 2 ....
 3 </tr>
 4 
 5 ....
 6 
 7     var vm = new Vue({
 8         el: '#list',
 9         data: {
10             'list':''
11         },
12         methods: {
13             classChange: function (status) {
14                 console.log(status);
15                 if (status === '1') {
16                     return 'am-success';
17                 } else if (status === '-1')  {
18                     return 'am-warning';
19                 }
20             }
21         }
22     });

 

分类:

技术点:

相关文章: