条件渲染
在原生的javaScript中我们通过给元素动态的添加display:block，opacity：0或1 ，样式的方式来动态的显示和隐藏元素。
在vue中可以给元素添加属性v-if v-else-if v-else v-show条件判断的方法来动态的改变元素的显示和隐藏。
<body>
<div id="app">
<div v-if="type=='A'">A</div>
<div v-else-if="type=='B'">B</div>
<div v-else-if="type==C"> C</div>
<div v-else>D</div>
</div>
<div id="app1" v-show="ok">
我是ok
</div>
<script>
// <!-- v-else-if指令用于条件性地渲染一块内容，这块内容之后会在指令的表达式返回truthy值的时候被渲染 -->
var vm=new Vue({
el:'#app',
data:{
type:'A',
}
})
//v-show 的元素始终会被渲染并保留在DOM中，v-show只是简单地切换元素的css属性display
var vm1=new Vue({
el:'#app1',
data:{
ok:true,
}
})
</script>
</body>
从上面可以看出我们有两种不同的方式来实现这样的效果，那么二者之间又怎样的区别呢？
v-if只有在条件满足时才能进行渲染，所以有切换开销。
而v-show则先进行渲染然后使用css样式进行隐藏，具有初始化开销。
列表渲染
<body>
<div id="app">
<ul>
//其中items是原数据数组，item则是被迭代的数组元素的别名
<li v-for="item in items">
{{item}}
</li>
</ul>
<ul>
//使用v-for,对一个对象进行循环 ,value是每一个属性的值
<li v-for="value in object">
{{value}}
</li>
</ul>
<ul>
//需要注意的是在进行遍历的时候，value：属性的值是第一个变量，key:属性名称是第二个变量
<li v-for='value,key in object'>
{{key}}:{{value}}
</li>
</ul>
// 为了给Vue一个提示，以便他能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一key属性： -->
//对于数组 使用v-bind指令为元素绑定key属性，属性值就是index-->
<ul>
<li v-for='item,index in items' v-bind:key='index'>
{{item}}
</li>
//对于对象，key属性的值就是键，来唯一指定
<li v-for='value,key in object' v-bind:key='key'>
{{key}}:{{value}}
</li>
//当给列表添加元素时
<li @click="add">点击我</li>
</ul>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
items:[
{message:'foo'},
{message:'bar'},
],
object:{
title:'How to do lists in Vue',
author:'Jane Doe',
publishedAt:'2016-04-10'
}
},
//直接对数据对象进行新增操作，不会立即触发网页重新渲染，只有更改了某个值之后，才会进行渲染。
methods:{
add(){
//下面这种添加元素的方式，不会触发网页的立即渲染
this.object.time="2020-10-1";
//我们可以使用以下方法来实现直接对一个vue实例内的数组项目或是对象进行操作而且还能实现触发dom更新
//对对象进行添加操作
this.$set(this.object,'time','2021-10-1');
//对数组进行=添加操作
this.$set(this.items,3,{name:'lhh'});
//使用下面的方式也可实现新增vue实例，并且立即渲染
this.object=Object.assign({},this.object,{sex:'男'})
}
}
})
</script>
</body>
当Vue正在更新使用v-for渲染的元素列表时，它默认使用"就地更新"的策略。如果数据项的顺序被改变， Vue将不会移动DOM元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每一个索引位置正确渲染。
309
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
