v-if 和 v-show 区别
1.v-if只有在判断为true的时候才能对数据进行渲染，false的时候把包含的代码进行删除。除非再次进行数据渲染，v-if才会重新判断。可以说用法比较倾向于对数据进行一次操作。
2.v-show无论判断是什么都会先对数据进行渲染，只是false时对节点进行display:none;的操作。所以在不重新渲染数据的情况下，改变数据的值可以使数据展示或隐藏。
A、 v-show 只是简单的控制元素的 display 属性，而 v-if 才是条件渲染（v-if条件为真，元素将会被渲染，条件为假，元素会被销毁 v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；）。
B、v-if有较低的初始开销，较高的切换开销，v-show有较高的初始开销，较低的切换开销（v-if有更高的切换消耗；v-show有更高的初始渲染消耗；
v-if适合运营条件不大可能改变；v-show适合频繁切换。
so，一般的，v-if有更高的切换消耗，而v-show有更多的初始化渲染消耗。
so，如果需要频繁的切换而对安全性无要求，使用v-show。如果在运行时，条件不可能改变，则使用v-if较好。）
C、v-show不能和v-else连用，不能用在template中
相同点：
v-if与v-show都可以动态控制dom元素显示隐藏
不同点：
v-if显示隐藏是将dom元素整个添加或删除，而v-show隐藏则是为该元素添加css--display:none，dom元素还在。
v-for中的key
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。如果数据项的顺序被改变，Vue将不是移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。这个类似 Vue 1.x 的 track-by="$index" 。
这个默认的模式是有效的，但是只适用于不依赖子组件状态或临时 DOM 状态（例如：表单输入值）的列表渲染输出。
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有唯一 id。这个特殊的属性相当于 Vue 1.x 的 track-by ，但它的工作方式类似于一个属性，所以你需要用 v-bind 来绑定动态值
v-for指令四种用法:
a.v-for循环普通数组
b.v-for循环对象数组
c.v-for循环对象
d.v-for迭代数组
<div id="app">
<!-- <ul>
<li v-for="item in 10">{{item}}</li>
</ul> -->
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
<ol>
<li v-for="(item,index) in list" :key="index">{{index}}--{{item}}</li>
</ol>
<ul>
<li v-for="item in json" :key="item.id">{{item.id}}--{{item.text}}</li>
</ul>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
list:[
"足球",
"篮球",
"乒乓球"
],
json:[
{
id:0,
text:"足球"
},{
id:1,
text:"篮球"
},{
id:2,
text:"乒乓球"
}
]
}
})
</script>
