一、v-for指令
下文用四個案例來分別解析，包括循環普通數組，循環對象數組、循環對象以及 數字迭代。
<body>
<div id="add">
<!-- v-for 循環普通數組 (num,int) 其中的第一個值表示內容，第二個值為索引。如果只填寫內容，則修改v-for循環的內容為 num in list-->
<p v-for="(num,int) in list">內容為：{{ num }}----索引為:{{int}}</p>
<!-- v-for 循環對象數組 如果添加索引，則通過（index，i） in list1，其中i，第二個值表示的索引，在其中調用。-->
<p v-for="index in list1">獲取id：{{index.id}}------獲取內容: {{index.name}} </p>
<!-- v-for 循環對象 在遍歷對象身上的鍵值對的時候， 除了 有 val key ,在第三個位置還有 一個 索引 ，這個值可以添加，也可以不添加-->
<p v-for="(val,key,i) in user">鍵名：{{key}}-------內容：{{val}}</p>
<!-- in 后面可以放 普通數組，對象數組，對象， 還可以放數字 -->
<!-- v-for 迭代數字 注意：如果使用 v-for 迭代數字的話，前面的 num 值從 1 開始-->
<p v-for="num in 10">這是第{{num}}次想你</p>
</div>
</body>
</html>
<script src="vue-2.4.0.js"></script>
<script>
var vm = new Vue({
el: '#add',
data:{
list: [1,2,3,4,5,6],
list1:[
{ id: 1, name: 'zs1' },
{ id: 2, name: 'zs2' },
{ id: 3, name: 'zs3' },
{ id: 4, name: 'zs4' }
],
user: {
id: 1,
name: '托尼·屎大顆',
gender: '男'
}
},
methods:{}
});
</script>
二、對key值的用法
key 在使用的時候，必須使用 v-bind 屬性綁定的形式，指定 key 的值，key值的類型只有兩種，數字類型或者字符串類型。
<body> <div id="app"> <div> <label>Id: <input type="text" v-model="id"> </label> <label>Name: <input type="text" v-model="name"> </label> <input type="button" value="添加" @click="add"> </div> <!-- 注意： v-for 循環的時候，key 屬性只能使用 number獲取string --> <!-- 注意： key 在使用的時候，必須使用 v-bind 屬性綁定的形式，指定 key 的值 --> <!-- 在組件中，使用v-for循環的時候，或者在一些特殊情況中，如果 v-for 有問題，必須 在使用 v-for 的同時，指定 唯一的 字符串/數字 類型 :key 值 --> <p v-for="item in list" :key="item.id"> <input type="checkbox">{{item.id}} --- {{item.name}} </p> </div> <script> // 創建 Vue 實例，得到 ViewModel var vm = new Vue({ el: '#app', data: { id: '', name: '', list: [ { id: 1, name: '李斯' }, { id: 2, name: '嬴政' }, { id: 3, name: '趙高' }, { id: 4, name: '韓非' }, { id: 5, name: '荀子' } ] }, methods: { add() { // 添加方法 //.unshift() 向數組的開頭添加一個或更多元素,並返回新的長度。 //.push() 向數組的結尾添加一個或更多元素,並返回新的長度。 this.list.unshift({ id: this.id, name: this.name }) } } }); </script> </body>
三、v-if和v-show的用法和區別
v-if 的特點：每次都會重新刪除或創建元素 -->
v-show 的特點： 每次不會重新進行DOM的刪除和創建操作，只是切換了元素的 display:none 樣式
優缺點：
v-if 有較高的切換性能消耗
v-show 有較高的初始渲染消耗
使用條件：
如果元素涉及到頻繁的切換，最好不要使用 v-if, 而是推薦使用 v-show
如果元素可能永遠也不會被顯示出來被用戶看到，則推薦使用 v-if
<body>
<div id="mas">
<!-- <input type="button" value="toggle" @click="toggle"> -->
<input type="button" value="toggle" @click="flag=!flag">
<h3 v-if="flag">這是用v-if控制的元素</h3>
<h3 v-show="flag">這是用v-show控制的元素</h3>
</div>
</body>
</html>
<script src="vue-2.4.0.js"></script>
<script>
var mas = new Vue({
el : "#mas",
data:{
flag:true
},
methods:{
// toggle(){
// this.flag = !this.flag
// }
}
})
</script>