[基础]模板中使用v-if条件判断
场景
- 场景
- 三元运算符控制模板样式
- v-if 判断
模板中使用条件判断,控制页面的样式,是最常见的应用。 Vue中提供了两种基本的方法,一种是我们已经讲过的三元运算符,另一种就是v-if
。
我们先来看利用三元运算符来控制模板的样式,根据Data中值的不同,显示不同的样式。
然后修改为下面的样子:
DOCTYPE html>
demo
const app = Vue.createApp({
data() {
return {
message:'willem'
}
},
methods:{
handleItemClick(){
this.message = this.message == 'willem' ? 'willem笔记' : 'willem.com'
}
},
template:'{{message}}'
});
const vm = app.mount('#app');
这就是一个最简单的Vue代码了,然后我们在标签下面,写一段style样式代码。
.one {color: red;}
.two {color: green;}
这里有两个基本的CSS样式,分别是让文字是红色和绿色。现在的需求是,要根据message
的值显示不同的颜色,是willem显示红色,是willem笔记时显示绿色。
类似这样的需求,就可以使用三元运算符,然后绑定class的形式。
template: `{{message}}`
这时候文字变化,对应的css样式也会变化。可以打开浏览器,看一下效果。
DOCTYPE html>
demo
.one {color: red;}
.two {color: green;}
const app = Vue.createApp({
data() {
return {
message:'willem'
}
},
methods:{
handleItemClick(){
this.message = this.message == 'willem' ? 'willem笔记' : 'willem'
}
},
template: `{{message}}`
});
const vm = app.mount('#app');
三元运算符的限制还是比较明显的,就是只能判断两个值,如果这时候我们再加入一个值,就是既不是 willem,也不是willem笔记的时候,我们显示橙色,这时候三元运算符就满足不了需求了,还好vue给我们准备了v-if
判断。
我们先加入一个CSS样式three:
.one {color: red;}
.two {color: green;}
.three{color:orange;}
然后可以使用 v-if
来进行编写模板。
template: `
{{message}}
{{message}}
{{message}}
`
当然,你也可以使用 v-else
,比如下面把代码改为这个样子。
template: `
{{message}}
{{message}}
`
v-if
在实际的工作中使用的也是非常多的,所以建议你多写两遍,加深一下印象。这篇文章完成后,我们关于Vue模板方面的语法就基本结束了。
DOCTYPE html>
demo
.one {color: red;}
.two {color: green;}
.three{color:orange;}
const app = Vue.createApp({
data() {
return {
message:'bilibili'
}
},
methods:{
handleItemClick(){
this.message = this.message == 'willem' ? 'willem笔记' : 'willem'
}
},
template: `
{{message}}
{{message}}
{{message}}
`
});
const vm = app.mount('#app');