VUE:条件渲染和列表渲染

Posted it-taosir

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

 

以上是关于VUE:条件渲染和列表渲染的主要内容,如果未能解决你的问题,请参考以下文章

VUE:条件渲染和列表渲染

Vue 指令数据及事件绑定条件和列表渲染

Vue中的条件渲染和循列表渲染

Vue条件渲染及列表渲染

Vue条件渲染及列表渲染

Vue基础(下):条件渲染列表渲染(key)过滤器内置和自定义指令