Vue整理02---条件渲染与列表渲染

2019年9月16日 152次阅读 来源: 彩笔梳子

1.简单的v-if v-else使用

<div id="app">
            <!-- 1.if else简单使用 -->
            <p v-if="show">true的时候显示</p>
            <p v-else>else的时候显示</p>
            <button v-on:click="show=!show">切换状态</button>
        </div>
<script>
        new Vue({
            el:'#app',
            data:{
                show:true,
            }    
        })
    </script>

解析：通过show来控制不同标签的显示，不存在的标签不是隐藏了而是删除了，这跟v-show不同。

2.v-for简单使用

<ul>
                <li v-for="(person,index) in persons">name is {{person.name}}, age is {{person.age}}</li>
            </ul>
data:{
                persons:[
                    {name:'csz',age:20},
                    {name:'lc',age:18},
                ]
            }

解析：循环列表时，参数1为内容，参数2为index，循环对象时，参数1为value，参数2为key

3.v-for列表数据的修改

<body>
        <div id="app">
            <!-- 1.if else简单使用 -->
            <!-- <p v-if="show">true的时候显示</p>
            <p v-else>else的时候显示</p>
            <button v-on:click="show=!show">切换状态</button> -->
            <!-- 2.列表渲染 -->
    
            <ul>
                <li v-for="(person,index) in persons">
                    <p v-for="(value,key) in person" :key="item.id">key is {{key}}, value is {{value}}</p>    
                </li>
            </ul>
            <button @click='persons.push({name:"111",age:"40"})'>增加一个</button>
            <button @click='persons.pop()'>删除最后一个</button>
        </div>
    </body>
<script>
        new Vue({
            el:'#app',
            data:{
                persons:[
                    {name:'csz',age:20},
                    {name:'lc',age:18},
                ]
            }
        })
    </script>

解析：for循环尽量可以接一个key用来区分。

    原文作者：彩笔梳子
    原文地址: https://segmentfault.com/a/1190000019430448
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞