共计 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
,其中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)
输出如下:
正文完