Conditional
- v-if
Directly on the example! (Body inside the tag)
<script type="text/javascript" src="js/vue.js"></script>
<div id="test">
<span v-if="ok">这里有一些水果：</span>
<template v-if="check">
<p>苹果</p>
<p>香蕉</p>
<p>雪梨</p>
</template>
</div>
<script type="text/javascript">
new Vue({
el:'#test',
data:{
ok:true,
check:true
}
});
</script>
The results can be directly copied test run
- V-else
Directly on the code, it is added, on the basis of the above
<span v-if="ok">这里有一些水果：</span>
<span v-else>这里没有水果</span>
<template v-if="check">
<p>苹果</p>
<p>香蕉</p>
<p>雪梨</p>
</template>
- v-else-if
Directly on the code
<div id="test">
<span v-if="check=='A'">100</span>
<span v-else-if="check=='B'">90</span>
<span v-else-if="check=='C'">80</span>
<span v-else-if="check=='D'">70</span>
<span v-else>60</span>
</div>
<script type="text/javascript">
new Vue({
el:'#test',
data:{
ok:true,
check:'A'
}
});
</script>
v-else, v-else-if necessary with the v-if or v-else-if then.
- v-show
<div id="test">
<span v-if="check=='A'">100</span>
<span v-else-if="check=='B'">90</span>
<span v-else-if="check=='C'">80</span>
<span v-else-if="check=='D'">70</span>
<span v-else>60</span>
<p v-show="ok">我在这里</p>
</div>
<script type="text/javascript">
new Vue({
el:'#test',
data:{
ok:true,
check:'A'
}
});
</script><div id="test">
<p v-show="ok">我在这里</p>
</div>
<script type="text/javascript">
new Vue({
el:'#test',
data:{
ok:true,
check:'A'
}
});
</script>
cycle
V-for recycling instructions.
- In the form of a
v-for="todo in todos"(single label)
V-instructions need for site in sites in the form of a special syntax, sites, and is the source data array is an array element in the iteration site alias.
v-for can be bound to data arrays to render a list:
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<div id="test">
<ul>
<li v-for="todo in todos">
{{todo.text}}
</li>
</ul>
</div>
<script type="text/javascript">
var v = new Vue({
el:'#test',
data:{
todos:[{text:'Jafe'},
{text:'Charlotte'},
{text:'哈哈哈'}]
}
});
</script>
Renderings:
- In the form of two
v-for="todo in todos"(block tag)
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<div id="test">
<ul>
<div v-for="todo in todos">
<li >
{{todo.text}}
</li>
<li>
--------------------
</li>
</div>
</ul>
</div>
<script type="text/javascript">
var v = new Vue({
el:'#test',
data:{
todos:[{text:'Jafe'},
{text:'Charlotte'},
{text:'哈哈哈'}]
}
});
</script>
Renderings:
- In the form of three
todo in todos(the whole object)
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<div id="test">
<ul>
<div v-for="todo in todos">
<li >
{{todo}}
</li>
<li>
-----分割线--------
</li>
</div>
</ul>
</div>
<script type="text/javascript">
var v = new Vue({
el:'#test',
data:{
todos:{
text:'Jafe',
number:123,
age:22
}
}
});
</script>
Renderings:
4. The form of fourv-for="(todo,key) in todos" (value, key)
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<div id="test">
<ul>
<div v-for="(todo,key) in todos">
<li >
{{key}}:{{todo}}
</li>
<li>
-----分割线--------
</li>
</div>
</ul>
</div>
<script type="text/javascript">
var v = new Vue({
el:'#test',
data:{
todos:{
text:'Jafe',
number:123,
age:22
}
}
});
</script>
Renderings:
- In the form of five
v-for="(todo,key,index) in todos"(value, key index)
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<div id="test">
<ul>
<div v-for="(todo,key,index) in todos">
<li >
{{index}}:{{key}}:{{todo}}
</li>
<li>
-----分割线--------
</li>
</div>
</ul>
</div>
<script type="text/javascript">
var v = new Vue({
el:'#test',
data:{
todos:{
text:'Jafe',
number:123,
age:22
}
}
});
</script>
Renderings:
- In the form of six
v-for="site in 10"(constant form)
<script type="text/javascript" src="js/vue.js"></script>
<div id="test">
<ul>
<li v-for="site in 10">
这是第{{site}}个
</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el:'#test'
});
</script>
Renderings:
