vue学习02--条件渲染与列表渲染

最新推荐文章于 2024-09-16 08:47:17 发布

aa393930087

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量88

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/CszShuzi/p/11056885.html

版权

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://www.cnblogs.com/CszShuzi/p/11056885.html