初学vue-05

1.条件渲染

v-show="判断语句"

v-if=“判断语句”

两者最直观的区别就是v-if在false的情况下回删除的更加彻底

创建点击事件来改变a的数值，以验证a的判断关系

<h2 v-if="a===1">{{name}}</h2>
    <span>{{a}}</span>
    <br>
    <button type="button" @click="a++">a++</button>

2.列表渲染

v-for渲染列表（类似for循环遍历数组）

：key来使每个元素独一无二

v-for=“（value,index）in  数组名”  ：key=“value”

 <ul>
        <li v-for="person in persons" :key="person">
            {{person.name}}---{{person.age}}
        </li>
    </ul>

 data:{
            a:0,
            name:"朱李闯",
            persons:[
                {id:"001",name:"张安",age:19},
                {id:"002",name:"李安",age:18},
                {id:"003",name:"王安",age:15},
            ]
        },

 效果展示

3.key

key可以使每个元素独一无二，也可以使元素同时发生改变