vue权威指南笔记03——v-for的几种用法

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>v-for的几种用法</title>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    </head>

    <body class="native">
        <div id="app">
            <h3>1.基础用法：遍历数组列表</h3>
            <ol>
                <li v-for="(item,index) in items">
                    姓名:{{item.name}};
                    年龄：{{item.age}};
                    key：{{index}}
                </li>
            </ol>
            <h3>2.特殊情况：遍历整数(用于数据的自定义显示，如不显示第一列)</h3>
            <ul>
                <li v-for="(item,index) in 5">
                    整数:{{item}};
                    key：{{index}}
                </li>
            </ul>
            <h3>3.过滤属性：filterBy</h3>
            <div>
                <ul>
                    <h4>1.自定义过滤：转换成大写</h4>
                    <li v-for="item in items ">{{item.cname | capitalize}}</li>
                    <h4>2.过滤参数：filter</h4>
                    <input type="text" id="searchText" placeholder="搜索年龄或者姓名" v-model="searchText" />
                    <li v-for="item in items">{{item.age | searchData(item.name, searchText)}}</li>
                </ul>

            </div>
        </div>

    </body>
    <script>
        var demo = new Vue({
            el: '#app',
            data: {
                items: [{
                    name: '张三',
                    age: '12',
                    cname: 'zhangshang'
                }, {
                    name: '李四',
                    age: '18',
                    cname: 'lisi'
                }, {
                    name: '王五 ',
                    age: '20',
                    cname: 'wangwu'
                }],
                searchText: '',
            },
            filters: {
                capitalize: function(value) {
                    if (!value) return ''
                    value = value.toString()
                    return value.toUpperCase(); //toLowerCase()
                },
                searchData: function(a,b,c) {
                    console.log(a,b,c,"过滤器函数可接收多个参数")
                    return b
                },
            },
            watch: {
                searchText: {
                    handler: function(val, oldval) {
                        console.log(val,oldval,"搜索的值")
                    },
                    deep: true
                }
            },
        })
    </script>

</html>
vue权威指南笔记03——v-for的几种用法

猜你喜欢
