99热99这里只有精品6国产,亚洲中文字幕在线天天更新,在线观看亚洲精品国产福利片 ,久久久久综合网

歡迎加入QQ討論群258996829
麥子學(xué)院 頭像
蘋果6袋
6
麥子學(xué)院

Vue.js的條件v-if和列表循環(huán)v-for

發(fā)布時(shí)間：2016-11-17 23:10  回復(fù):0  查看:2802   最后回復(fù)：2016-11-17 23:10  
本文將繼續(xù)和大家分享Vue.js的基礎(chǔ)知識(shí)，主要是介紹Vue.js 的條件 v-if 和列表循環(huán) v-for的相關(guān)使用，一起來看看吧，希望可以幫助大家更好的 學(xué)習(xí)Vue.js。
v-if  、 v-else 、 v-show 、還可以使用 template
<div v-if="ok">ok</div>
<div v-else>No</div>
<div v-show="ok">ok</div>
<template v-if="ok">
<strong> 測(cè)試 template</strong>
</template>
<template v-else>
<strong>no template</strong>
</template>
演示
列表循環(huán)v-for
循環(huán)數(shù)組
<ul>
<li v-for="todo in todos">{{todo.text}}</li>
</ul>
多級(jí)列表，第二個(gè)參數(shù)提供當(dāng)前項(xiàng)的索引、template 模板
<div v-for="items in list">
<template v-for="(item, index) in items">{{index}} - {{item.message}}<br/></template>
</div>
對(duì)象迭代：
一個(gè)參數(shù)作為值
<div v-for="value in object">
{{value}}
</div>
第二個(gè)參數(shù)作為鍵名
<div v-for="(value,key) in object">
{{key}} - {{value}}
</div>
第三個(gè)參數(shù)作為當(dāng)前項(xiàng)的索引
<div v-for="(value,key,index) in object">
{{index}} - {{key}} : {{value}}
</div>
組件  和 v-for
循環(huán)數(shù)組數(shù)據(jù)到組件中，使用props ，可以把值和當(dāng)前索引賦值給組件。
<my-component
v-for="(item, index) in items"
v-bind:item="item"
v-bind:index="index">
</my-component>
或者下面這種加了某些有語義標(biāo)簽，里面有一個(gè)is=" 組件名 "
<li
is="todo-item"
v-for="(todo, index) in todos"
v-bind:item="todo"
v-on:remove="todos.splice(index, 1)"
></li>
下面是一個(gè)完整示例：
<div id="todo-list-example">
        <input
        v-model="newTodoText"
        v-on:keyup.enter="addNewTodo"
        placeholder="Add a todo"
        >
        <ul>
                <li
                is="todo-item"
                v-for="(todo, index) in todos"
                v-bind:item="todo"
                v-on:remove="todos.splice(index, 1)"
                ></li>
        </ul>
</div>
Vue.component('todo-item', {
        template: '\
        <li>\
        {{ item }}\
                <button v-on:click="$emit(\'remove\')">X</button>\
        </li>\
        ',
        props: ['item']
})
new Vue({
        el: '#todo-list-example',
        data: {
                newTodoText: '',
                todos: [
                'Do the dishes',
                'Take out the trash',
                'Mow the lawn'
        },
        methods: {
                addNewTodo: function () {
                        this.todos.push(this.newTodoText)
                        this.newTodoText = ''
                }
        }
})
使用props 將數(shù)組循環(huán)的索引項(xiàng)和值賦值給當(dāng)前組件
發(fā)現(xiàn)一個(gè)細(xì)節(jié)，就是組件模板template 分行要加一個(gè) \, 另外雙引號(hào)里面有分號(hào)也要加一個(gè) \.
使用當(dāng)前執(zhí)行函數(shù)，$emit(\'remove\') ； remove 是綁定在 DOM 中的函數(shù)。
為了給 Vue  一個(gè)提示，以便它能跟蹤每個(gè)節(jié)點(diǎn)的身份，從而重用和重新排序現(xiàn)有元素，你需要為每項(xiàng)提供一個(gè)唯一  key  屬性。理想的  key  值是每項(xiàng)都有唯一  id 。這個(gè)特殊的屬性相當(dāng)于  Vue 1.x  的  track-by  ，但它的工作方式類似于一個(gè)屬性，所以你需要用  v-bind  來綁定動(dòng)態(tài)值（在這里使用簡(jiǎn)寫）：
<div v-for="item in items" :key="item.id">
<!--  內(nèi)容  -->
</div>
建議盡可能使用 v-for  來提供  key  ，除非迭代  DOM  內(nèi)容足夠簡(jiǎn)單，或者你是故意要依賴于默認(rèn)行為來獲得性能提升。
因?yàn)樗?/span> Vue  識(shí)別節(jié)點(diǎn)的一個(gè)通用機(jī)制，  key  并不特別與  v-for  關(guān)聯(lián)， key  還具有其他用途，我們將在后面的指南中看到其他用途。
數(shù)組更新檢測(cè)
Vue  包含一組觀察數(shù)組的變異方法，所以它們也將會(huì)觸發(fā)視圖更新。這些方法如下：
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
你打開控制臺(tái)，然后用前面例子的 items  數(shù)組調(diào)用突變方法：  example1.items.push({ message: 'Baz' })  。
重塑數(shù)組
變異方法(mutation method) ，顧名思義，會(huì)改變被這些方法調(diào)用的原始數(shù)組。相比之下，也有非變異 (non-mutating method) 方法，例如：  filter() , concat() , slice()  。這些不會(huì)改變?cè)紨?shù)組，但總是返回一個(gè)新數(shù)組。當(dāng)使用用非變異方法時(shí)，可以用新數(shù)組替換舊數(shù)組：
example1.items = example1.items.filter(function (item) {
return item.message.match(/Foo/)
})
你可能認(rèn)為這將導(dǎo)致 Vue  丟棄現(xiàn)有  DOM  并重新渲染整個(gè)列表。幸運(yùn)的是，事實(shí)并非如此。  Vue  實(shí)現(xiàn)了一些智能啟發(fā)式方法來最大化  DOM  元素重用，所以用一個(gè)含有相同元素的數(shù)組去替換原來的數(shù)組是非常高效的操作。
注意事項(xiàng)
由于 javascript  的限制，  Vue  不能檢測(cè)以下變動(dòng)的數(shù)組：
當(dāng)你直接設(shè)置一個(gè)項(xiàng)的索引時(shí)，例如： vm.items[indexOfItem] = newValue
當(dāng)你修改數(shù)組的長(zhǎng)度時(shí)，例如： vm.items.length = newLength
為了避免第一種情況，以下兩種方式將達(dá)到像 vm.items[indexOfItem] = newValue  的效果， 同時(shí)也將觸發(fā)狀態(tài)更新：
// Vue.set
Vue.set(example1.items, indexOfItem, newValue)
// Array.prototype.splice`
example1.items.splice(indexOfItem, 1, newValue)
避免第二種情況，使用 splice  ：
example1.items.splice(newLength)
顯示過濾/ 排序結(jié)果
有時(shí)，我們想要顯示一個(gè)數(shù)組的過濾或排序副本，而不實(shí)際改變或重置原始數(shù)據(jù)。在這種情況下，可以創(chuàng)建返回過濾或排序數(shù)組的計(jì)算屬性。
例如：
<li v-for="n in evenNumbers">{{ n }}</li>
data: {
numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
evenNumbers: function () {
return this.numbers.filter(function (number) {
return number % 2 === 0
})
}
}
或者，您也可以使用在計(jì)算屬性是不可行的 method  方法  ( 例如，在嵌套  v-for  循環(huán)中 ) ：
<li v-for="n in even(numbers)">{{ n }}</li>
data: {
numbers: [ 1, 2, 3, 4, 5 ]
},
methods: {
even: function (numbers) {
return numbers.filter(function (number) {
return number % 2 === 0
})
}
}
文章來源：前端開發(fā)博客
您還未登錄，請(qǐng)先登錄

熱門帖子

最新帖子

?