Vue学习笔记二

36次阅读

共计 2246 个字符,预计需要花费 6 分钟才能阅读完成。

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,其中AB中的每一个值,若 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,提供的函数作为属性reversegetterreverse依赖于 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)

输出如下:

正文完
 0