Vue之条件语句&循环语句---kalrry
一、v-if条件语句
1. v-if
<div id="app">
<p v-if="ok">v-if条件判读</p>
</div>
<script>
new Vue({
el: '#app',
data: {
ok: true
}
})
</script>
2. v-else
随机生成一个数字，判断是否大于0.5，然后输出对应信息：
<div id="app">
<p v-if="Math.random()>0.5">
Sorry</p>
<p v-else>Not Sorry</p>
</div>
<script>
new Vue({
el: '#app'
})
</script>
3. v-else-if
与v-if连用构成if-else if -else结构
<div id="app">
<p v-if="grade>=85">优秀</p>
<p v-else-if="grade>=70 && grade<850">良好</p>
<P v-else-if="grade>=60 && grade<70">及格</P>
<p v-else>不及格</p>
</div>
<script>
new Vue({
el: '#app',
data:{
grade: Math.random()*100
}
})
4. v-show
我们也可以使用 v-show 指令来根据条件展示元素
<div id="app">
<p v-show="ok">我们也可以使用 v-show 指令来根据条件展示元素</p>
</div>
<script>
new Vue({
el: '#app',
data: {
ok: true
}
})
</script>
二、v-for 循环指令
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
1. 例：v-for 循环数组渲染列表
<div id="app">
<li v-for="item in browser">{
{
item.name}}</li>
</div>
<script>
new Vue({
el: '#app',
data: {
browser:[{
name: 'Chrome' },{
name: 'IE' },{
name: 'FireFox' }]
}
})
</script>
2. 例：v-for 循环对象渲染列表
<div id="app">
<ul>
<li v-for="value in object">
{
{
value }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
object: {
name: '菜鸟教程',
url: 'http://www.runoob.com',
slogan: '学的不仅是技术，更是梦想！'
}
}
})
</script>
3. 例：将第二个的参数作为键名
<div id="app">
<li v-for="(value,key) in person">{
{
key}}：{
{
value}}</li>
</div>
<script>
new Vue({
el: '#app',
data: {
person: {
name: "Tom",
age: 16,
sex: "男"
}
}
})
</script>
4. 例：将第三个参数作为索引
<div id="app">
<li v-for="(value,key,index) in person">{
{
key}}：{
{
value}}--->{
{
index}}</li>
</div>
5. 例：v-for 循环创建整数列表
<div id="app">
<li v-for="num in 10">{
{
num}}</li>
</div>