正文
vue.js 使用小结
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
2016年12月10日 17:18:42 星期六
情景:
主要介绍 v-for 循环时对变量的处理方法
主要以table标签为例
1. 为 tr 标签动态添加属性
<tr v-for="item in items" v-bind:id="'item_' + item.id"> //效果: <tr id="item_7">
2.截取字符串
<td>{{subTitle(item.title)}}</td>
.....
methods: {
subTitle: function(val) {
if (val.length < 20) {
return val;
} else {
return val.substring(0, 20) + '...';
}
}
}
3.绑定事件
<td><span v-bind:id="'item_op_' + item.id" v-on:click="del('delArticle', 'id', item.id)">删除</span></td>
//显示效果: <td><span id="item_op_7">删除</span></td>
....
methods: {
del: function (method, itemKey, itemValue) {
abc(method, itemKey, itemValue); // 页面中定义的其它函数, 也可以在里边直接写逻辑
}
}
....
4.radio 默认选中
<template v-for="(item, index) in types">
<input type="radio" name="params" v-bind:value="item.type" v-model="article.type" > {{item.name}}  
</template> // 参数解释
// types: 所有的文章类型; article.type: 某篇文章的类型
// 当article.type == item.type 时radio被选中
5.条件渲染(if-else)
<template v-for="(func, index) in item.method">
<template v-if="(index + 1) % 5 === 0"> //每四个换行, 注意是3个=号
<br>
</template> <input type="checkbox" v-bind:value="func.name" v-bind:title="func.name"> {{func.doc}}
</template>
6. 调用函数处理样式: 注意, 在标签的属性中调用函数要把属性改写成 v-bind:class="" 或者简写 :class=""
<tr v-for="(row, index) in list" :data-id="row.id" :class="classChange(row.status)">
....
</tr> .... var vm = new Vue({
el: '#list',
data: {
'list':''
},
methods: {
classChange: function (status) {
console.log(status);
if (status === '') {
return 'am-success';
} else if (status === '-1') {
return 'am-warning';
}
}
}
});
