1.条件判断
- v-if：用于条件判断的指令。
需求：v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
<div id='app'>
<p v-if="seen">现在可以被看到</p>
</div>
var vm = new Vue({
el: '#app',
data:{
seen: false
}
})
- v-else：可以用
v-else指令给v-if添加一个 “else” 块。
随机生成一个数字，判断是否大于0.5，然后输出对应信息。
<div v-if="Math.random() > 0.5">
大于 0.5
</div>
<div v-else>
不大于 0.5
</div>
- v-else-if：用作
v-if的else-if块。可以链式的多次使用。
<div id='app'>
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else>
Not A/B
</div>
</div>
var vm = new Vue({
el: '#app',
data:{
type: 'C'
}
})
注意：v-else 、v-else-if 必须跟在 v-if 或者 v-else-if 之后。
- v-show：根据条件展示元素。
<div id='app'>
<p v-show='ok'>Hello vue!</p>
</div>
var vm = new Vue({
el: '#app',
data:{
ok: true
}
})
2、v-if 与 v-show 的区别
v-if是动态添加，当值为false时，是完全移除该元素，即 dom 树中不存在该元素。v-show仅是隐藏 / 显示，值为false时，该元素依旧存在于 dom 树中。若其原有样式设置了display: none则会导致其无法正常显示。- 一般来说，
v-if有更高的切换消耗而v-show有更高的初始渲染消耗。因此，如果需要频繁切换v-show较好，如果在运行时条件不大可能改变v-if较好。
3. 循环语句
循环使用 v-for指令。
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
v-for可以绑定数据到数组来渲染一个列表。
<div id='app'>
<ol>
<li v-for="site in sites">
{
{
site.name}}
</li>
</ol>
</div>
var vm = new Vue({
el: '#app',
data:{
sites: [
{
name: '张三'},
{
name: '李四'},
{
name: '王五'},
]
}
})
- 模板中使用
v-for
<div id='app'>
<ul>
<template v-for="site in sites">
<li>{
{
site.name}}</li>
<li>------</li>
</template>
</ul>
</div>
v-for迭代对象：v-for可以通过一个对象的属性来迭代数据
<div id='app'>
<ul>
<li v-for="value in object">
{
{
value}}
</li>
</ul>
</div>
var vm = new Vue({
el: '#app',
data:{
object: {
name: '菜鸟',
url: 'http://www.xxx.com',
slogan: '学的不仅是技术，更是梦想！'
}
}
})
v-for迭代对象：也可以提供第二个的参数为键名
<li v-for="(value, key) in object">
{
{
key}} : {
{
value}}
</li>
v-for迭代对象：也可以提供第三个的参数为索引
<li v-for="(value, key, index) in object">
{
{
index}} : {
{
key}} : {
{
value}}
</li>
v-for迭代对象：也可以循环整数
// 输出1-10
<div id="app">
<ul>
<li v-for="n in 10">
{
{
n }}
</li>
</ul>
</div>
不积跬步无以至千里 不积小流无以成江海