版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/bowei026/article/details/91358769
vue的视图指令有v-on, v-bind, v-if, v-for 等等,只要是以 v- 开头的都是指令Directive。指令中都要使用表达式
一、v-if
script内容添加 age 的定义:
data () {
return {
message: 'hi, 我的第一个vue程序',
age: 19
}
}
模板内容添加:
<div v-if="age >= 18"> 你成年了 </div>
运行程序,页面会显示 “你成年了”
v-if, v-else-if, v-else
修改模板内容:
<div v-if="age < 18"> 你未成年 </div>
<div v-else-if="age < 21"> 你成年了 </div>
<div v-else> 你可以结婚了 </div>
修改 age 的值,可以看到页面根据age的值显示不同的内容。
二、v-for
修改 script部分的内容,添加 fruits 变量和值:
fruits: ['apple', 'banana', 'pear', 'strawberry']
修改模板的内容:
<ul>
<li v-for="fruit in fruits" :key="fruit">
{{fruit}}
</li>
</ul>
运行程序,页面会显示四种水果名。
三、v-for 和 v-if 同时使用
v-for 和 v-if 同时使用时,v-for的优先级更高,也就是说先执行v-for 再执行 v-if。
修改模板内容中的 v-for :
<ul>
<li v-for="fruit in fruits" v-if="fruit.indexOf('e') >= 0">
{{fruit}}
</li>
</ul>
运行程序,页面只显示包含字母 e 的水果,而banana由于不包含字母e不会在页面显示。
Hi.vue 最终的内容为:
<template>
<div class='hi' v-on:click="showMessage('Jom')">
{{message}}
<div v-if="age < 18"> 你未成年 </div>
<div v-else-if="age < 21"> 你成年了 </div>
<div v-else> 你可以结婚了 </div>
<ul>
<li v-for="fruit in fruits" :key="fruit" v-if="fruit.indexOf('e') >= 0">
{{fruit}}
</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
message: 'hi, 我的第一个vue程序',
age: 2,
fruits: ['apple', 'banana', 'pear', 'strawberry']
}
},
methods: {
showMessage: function (name) {
alert('hi, ' + name)
}
}
}
</script>
<style>
.hi{
color: blue;
font-size: 20px;
}
</style>
本文内容到此结束,更多内容可关注公众号和个人微信号: