vue.js 使用小結

標籤：變數   字串   星期六   length   綁定   顯示效果   else   ring   定義   

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 使用小結