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

时间 2019-11-07

标签 vue 整理条件渲染列表繁體版

原文原文链接

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不一样。app

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为keycode

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用来区分。对象