scene
The template uses conditional judgment to control the style of the page, which is the most common application.
Vue provides two basic methods, one is the ternary operator we have talked about, and the other is v-if.
Ternary operators control template styles
Let's first look at the use of ternary operators to control the style of templates, and display different styles according to different values in Data.
Then modify it to look like the following:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
<script type="text/javascript">
const app = Vue.createApp({
data() {
return {
message:'willem'
}
},
methods:{
handleItemClick(){
this.message = this.message == 'willem' ? 'willem note' : 'willem.com'
}
},
template:'<h2>{{message}}</h2>'
});
const vm = app.mount('#app');
</script>
</body>
</html>
This is the simplest Vue code, and then we write a piece of style code under the < script > tag.
<style>
.one {color: red;}
.two {color: green;}
</style>
Here are two basic CSS styles: making text red and green. The current requirement is to display different colors according to the value of message. willem displays red and willem notes display green.
For requirements like this, you can use the ternary operator and bind the form of class.
template: `<h2 :class="message == 'willem.com'? 'one' : 'two'"
@click="handleItemClick">{{message}}</h2>`
When the text changes, the corresponding css style will also change. You can open the browser and see the effect.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo</title>
<script src="https://unpkg.com/vue@next"></script>
<style>
.one {color: red;}
.two {color: green;}
</style>
</head>
<body>
<div id="app"></div>
<script type="text/javascript">
const app = Vue.createApp({
data() {
return {
message:'willem'
}
},
methods:{
handleItemClick(){
this.message = this.message == 'willem' ? 'willem note' : 'willem'
}
},
template: `<h2 :class="message == 'willem' ? 'one' : 'two'"
@click="handleItemClick">{{message}}</h2>`
});
const vm = app.mount('#app');
</script>
</body>
</html>
v-if judgment
The limitation of the ternary operator is obvious, that is, it can only judge two values. If we add another value at this time, it is neither willem nor willem's notes. We display orange. At this time, the ternary operator can't meet the demand. Fortunately, vue has prepared v-if judgment for us.
Let's add a CSS style three:
<style>
.one {color: red;}
.two {color: green;}
.three{color:orange;}
</style>
You can then use v-if to write templates.
template: `
<h2 @click="handleItemClick" v-if="message=='willem.com'" class="one" > {{message}} </h2>
<h2 @click="handleItemClick" v-if="message=='willem note'" class="two"> {{message}} </h2>
<h2 @click="handleItemClick" v-if="message=='bilibili'" class="three"> {{message}} </h2>
`
Of course, you can also use v-else. For example, change the code to this way below.
template: `
<h2 @click="handleItemClick" v-if="message=='willem'" class="one" > {{message}} </h2>
<h2 @click="handleItemClick" v-else class="three"> {{message}} </h2>
`
v-if is also widely used in practical work, so I suggest you write it twice to deepen your impression. After this article is completed, our syntax on Vue templates is basically over.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo</title>
<script src="https://unpkg.com/vue@next"></script>
<style>
.one {color: red;}
.two {color: green;}
.three{color:orange;}
</style>
</head>
<body>
<div id="app"></div>
<script type="text/javascript">
const app = Vue.createApp({
data() {
return {
message:'bilibili'
}
},
methods:{
handleItemClick(){
this.message = this.message == 'willem' ? 'willem note' : 'willem'
}
},
template: `
<h2 @click="handleItemClick" v-if="message=='willem'" class="one" > {{message}} </h2>
<h2 @click="handleItemClick" v-if="message=='willem note'" class="two"> {{message}} </h2>
<h2 @click="handleItemClick" v-if="message=='bilibili'" class="three"> {{message}} </h2>
`
});
const vm = app.mount('#app');
</script>
</body>
</html>
