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用來區分。對象

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。