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 使用小结的主要内容,如果未能解决你的问题,请参考以下文章

Vue.js 中的片段

使用 Vue 模板清晰地分离视图和代码

vue.js 2.0 项目开发小结

vue.js 2 - 将单个文件组件的 html 片段提取到独立文件中

第1129期对vue.js单文件(.vue)进行单元测试

对vue.js 生命流程大致总结