11 v-if 更好颜色、三元运算符

[基础]模板中使用v-if条件判断场景三元运算符控制模板样式v-if 判断场景模板中使用条件判断，控制页面的样式，是最常见的应用。Vue中提供了两种基本的方法，一种是我们已经讲过的三元运算符，另一种就是v-if。三元运算符控制模板样式我们先来看利用三元运算符来控制模板的样式，根据Data中值的不同，显示不同的样式。然后修改为下面的样子:<!DOCTYPE html><html&g

知其黑、受其白

3864人浏览 · 2021-11-26 17:33:16

知其黑、受其白 · 2021-11-26 17:33:16 发布

[基础]模板中使用v-if条件判断

场景
三元运算符控制模板样式
v-if 判断

场景

模板中使用条件判断，控制页面的样式，是最常见的应用。
Vue中提供了两种基本的方法，一种是我们已经讲过的三元运算符，另一种就是v-if。

三元运算符控制模板样式

我们先来看利用三元运算符来控制模板的样式，根据Data中值的不同，显示不同的样式。

然后修改为下面的样子:

<!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笔记' : 'willem.com'
        }
    },
    template:'<h2>{{message}}</h2>'
});
const vm = app.mount('#app');
</script>
</body>
</html>

这就是一个最简单的Vue代码了，然后我们在<script>标签下面，写一段style样式代码。

<style>
    .one {color: red;}
    .two {color: green;}
</style>

这里有两个基本的CSS样式，分别是让文字是红色和绿色。现在的需求是，要根据message的值显示不同的颜色，是willem显示红色，是willem笔记时显示绿色。

类似这样的需求，就可以使用三元运算符，然后绑定class的形式。

template: `<h2 :class="message == 'willem.com'? 'one' : 'two'"
@click="handleItemClick">{{message}}</h2>`

这时候文字变化，对应的css样式也会变化。可以打开浏览器，看一下效果。

<!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笔记' : 'willem'
        }
    },
    template: `<h2 :class="message == 'willem' ? 'one' : 'two'"
                @click="handleItemClick">{{message}}</h2>`
});
const vm = app.mount('#app');
</script>
</body>
</html>

在这里插入图片描述

v-if 判断

三元运算符的限制还是比较明显的，就是只能判断两个值，如果这时候我们再加入一个值，就是既不是 willem,也不是willem笔记的时候，我们显示橙色，这时候三元运算符就满足不了需求了，还好vue给我们准备了v-if判断。

我们先加入一个CSS样式three:

<style>
    .one {color: red;}
    .two {color: green;}
    .three{color:orange;}
</style>

然后可以使用 v-if 来进行编写模板。

template: `
<h2 @click="handleItemClick" v-if="message=='willem.com'" class="one" > {{message}} </h2>
<h2 @click="handleItemClick" v-if="message=='willem笔记'" class="two"> {{message}} </h2>
<h2 @click="handleItemClick" v-if="message=='bilibili'"  class="three"> {{message}} </h2>
`

当然，你也可以使用 v-else，比如下面把代码改为这个样子。

template: `
<h2 @click="handleItemClick" v-if="message=='willem'" class="one" > {{message}} </h2>
<h2 @click="handleItemClick" v-else  class="three"> {{message}} </h2>
`

v-if 在实际的工作中使用的也是非常多的，所以建议你多写两遍，加深一下印象。这篇文章完成后，我们关于Vue模板方面的语法就基本结束了。

<!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笔记' : 'willem'
        }
    },
    template: `
            <h2 @click="handleItemClick" v-if="message=='willem'" class="one" > {{message}} </h2>
            <h2 @click="handleItemClick" v-if="message=='willem笔记'" class="two"> {{message}} </h2>
            <h2 @click="handleItemClick" v-if="message=='bilibili'"  class="three"> {{message}} </h2>
            `
});
const vm = app.mount('#app');
</script>
</body>
</html>

在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

Vue

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^