vue.js 使用小结
Posted myD
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue.js 使用小结相关的知识,希望对你有一定的参考价值。
2016年12月10日 17:18:42 星期六
情景:
主要介绍 v-for 循环时对变量的处理方法
主要以table标签为例
1. 为 tr 标签动态添加属性
1 <tr v-for="item in items" v-bind:id="‘item_‘ + item.id"> 2 3 //效果: <tr id="item_7">
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:id="‘item_op_‘ + item.id" v-on:click="del(‘delArticle‘, ‘id‘, item.id)">删除</span></td> 2 3 //显示效果: <td><span id="item_op_7">删除</span></td> 4 5 .... 6 7 methods: { 8 del: function (method, itemKey, itemValue) { 9 abc(method, itemKey, itemValue); // 页面中定义的其它函数, 也可以在里边直接写逻辑 10 } 11 } 12 13 ....
以上是关于vue.js 使用小结的主要内容,如果未能解决你的问题,请参考以下文章