享学课堂java架构二期
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用来区分。
