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}} &emsp;
</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 === '1') {
                    return 'am-success';
                } else if (status === '-1')  {
                    return 'am-warning';
                }
            }
        }
    });