VUE：条件渲染和列表渲染

条件渲染

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--
            1.条件渲染指令
                v-if    v-else    移除标签
                v-show            通过样式隐藏
            2.比较 v-if 与v-show
                如果需要频繁切换 v-show 较好
        -->

        <div id="app">
            <p v-if="ok">成功了</p>
            <p v-else>失败了</p>

            <p v-show="ok">表白成功了</p>
            <p v-show="!ok">表白失败了</p>
            <button @click="ok=!ok">切换</button>
        </div>

        <script type="text/javascript" src="../js/vue.js" ></script>
        <script>
            new Vue({
                el:'#app',
                data:{
                    ok:false
                }
            })
        </script>
    </body>
</html>

列表渲染

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--
            1.列表显示
                数组：v-for    /    index
                对象：v-for    /    key
            2.列表的更新显示
                删除item
                替换item
        -->

        <div id="demo">
            <h2>测试：v-for 遍历数组</h2>
            <ul>
                <!-- p:遍历的个体    index：下标-->
                <li v-for="(p,index) in persons" :key="index">
                    {{index}}----{{p.name}}----{{p.age}}
                    ----<button @click="deleteP(index)">删除</button>
                    ----<button @click="updateP(index,{name:'Cat',age:20})">更新</button>
                </li>
            </ul>
            <h2>测试：v-for 遍历对象</h2>
            <ul>
                <li v-for="(value,key) in persons[1]" :key="key">
                    {{value}}----{{key}}
                </li>
            </ul>
        </div>

        <script type="text/javascript" src="../js/vue.js" ></script>
        <script>
            //vue本身只是监视了的改变，没有监视数组内部数据的改变
            //vue重写了数组中的一系列改变数组内部数据的方法（先调用原生，更新界面）
            //即vue包含一组观察数组的变异方法，所以他们也将会触发视图更新：
            //push()    pop()    shift()
            //unshift()    splice()    sort()    reverse()
            //实现思路：重写-更新
            new Vue({
                el:"#demo",
                data:{
                    persons:[
                        {name:'Tom',age:18},
                        {name:'Taosir',age:22},
                        {name:'moer',age:20},
                        {name:'Bom',age:24},
                    ]
                },
                methods:{
                    deleteP(index){
                        //删除persons中指定的index的p

                        this.persons.splice(index,1);
                    },
                    updateP(index,newP){
                        //并没有改变persons本身，数据内部发生了变化，但并没有调用变异方法，vue不会更新
                        //this.persons[index]=newP;    //没有指向persons本身，错！
                        this.persons.splice(index,1,newP);//删除一个，然后添加
                    }
                }
            })
        </script>
    </body>
</html>