Vue學習筆記（二）

1 條件判斷

1.1 普通if

條件判斷使用v-if指令：

<div id="app">
    <p v-if="seen">看到了</p>;
</div>

<script>
new Vue({
    el:'#app',
    data:{
        seen:true
    }
})
</script>

v-if指令根據表達式的值（在這裏是seen）決定是否插入<p>

1.2 if-else

能夠使用v-else添加一個else塊：

<div id="app">
    <div v-if="Math.random()>0.5">1</div>
    <div v-else>2</div>
</div>

<script>
new Vue({
    el:'#app'
})
</sctipt>

也能夠增長v-else-if：

<div id="app">
    <div v-if="value === 'A'">A</div>
    <div v-else-if="value === 'B'">B</div>
    <div v-else-if="value === 'C'">C</div>
    <div v-else>D</div>
</div>

<script>
new Vue({
    el:'#app',
    data:{
        value:'A'
    }
})
</script>

v-else以及v-else-if必須跟在v-if或者v-else-if以後。

1.3 v-show

也能夠根據v-show展現元素：

<div id="app">
    <h1 v-show="ok">Test</h1>
</div>

<script>
new Vue({
    el:'#app',
    data:
    {
        ok:true
    }
})
</script>

2 循環

循環使用v-for，格式爲：A in B，其中A是B中的每個值，若B爲數組，則A表示其中的沒一個元素，若B爲對象，則A能夠表示B中的沒一個值，一般配合<li>使用：

<div id="app">
    <ol>
        <li v-for="i in arr">{{i.value}}</li>
    </ol>
</div>

<script>
new Vue({
    el:'#app',
    data:
    {
        arr:
        [
            {value:'value1'},
            {value:'value2'},
            {value:'value3'}
        ]
    }
})
</script>

另外也能夠經過一個對象的屬性來迭代數據：

<div id="app">
    <ul>
        <li v-for="value in obj">{{value}}</li>
    </ul>
</div>

<script>
new Vue({
    el:'#app',
    data:
    {
        obj:
        {
            value1:'value1',
            value2:'value2',
            value3:'value3'
        }
    }
})
</script>

也能夠提供第二個參數做爲鍵名：

<li v-for="(value,key) in obj">
{{key}} -> {{value}}
</li>

第三個參數做爲索引：

<li v-for="(value,key,index) in obj">
{{index}} : {{key}} -> {{value}}
</li>

另外也能夠迭代整數：

<li v-for="n in 10">{{n}}</li>

範圍是從0到10，包含0與10。

3 計算屬性

3.1 computed

計算屬性相似與方法調用，好比以前的反轉字符串的例子：

{{message.split('').reverse().join('')}}

這樣看起來很長，能夠使用計算屬性進行簡化：

<div id="app">
    <p>{{reverse}}</p>
</div>

<script>
new Vue({
    el:'#app',
    data:
    {
        message:'Test'
    },
    computed:
    {
        reverse:function()
        {
            return this.message.split.reverse().join('')
        }
    }
})
</script>

這裏聲明瞭一個計算屬性reverse，提供的函數做爲屬性reverse的getter，reverse依賴於message，當message更新時，reverse也會更新。

3.2 computed與methods

能夠使用methods來代替computed：

methods:
{
    reverse:function()
    {
        return this.message.split.reverse().join('')
    }
}

對應只須要增長一對()：

<div id="app">
    <p>{{reverse()}}</p>
</div>

computed基於它的依賴緩存，只有相關依賴修改時纔會從新取值，而使用methods，在從新渲染時函數總會從新調用執行。

3.3 setter

computed默認只有 getter，不過也能夠自行提供setter：

var vm = new Vue({
    el:'#app',
    data:
    {
        name:'test',
        url:'https://www.test.com'
    },
    computed:
    {
        site:
        {
            get:function()
            {
                return this.name + ' ' + this.url; 
            },
            set:function(value)
            {
                var values = value.split(' ')
                this.name = values[0]
                this.url = values[1]
            }
        }
    }
})

vm.site = 'test2 https://www.test2.com'
document.write('name:'+vm.name)
document.write('<br>')
document.write('url:'+vm.url)

輸入以下：