后端必备vue知识第五篇

「这是我参与2022首次更文挑战的第23天，活动详情查看：2022首次更文挑战」。

一、绑定样式

1. class样式
   • 写法:class="xxx" xxx可以是字符串、对象、数组。
   • 字符串写法适用于：类名不确定，要动态获取。
   • 对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
   • 数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
2. style样式
   • :style="{fontSize: xxx}"其中xxx是动态值。
   • :style="[a,b]"其中a、b是样式对象。

<!-- 准备好一个容器-->
<div id="root">
    <!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
    <div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br/><br/>

    <!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
    <div class="basic" :class="classArr">{{name}}</div> <br/><br/>

    <!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
    <div class="basic" :class="classObj">{{name}}</div> <br/><br/>

    <!-- 绑定style样式--对象写法 -->
    <div class="basic" :style="styleObj">{{name}}</div> <br/><br/>
    <!-- 绑定style样式--数组写法 -->
    <div class="basic" :style="styleArr">{{name}}</div>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false

    const vm = new Vue({
        el:'#root',
        data:{
            name:'moe',
            mood:'normal',
            classArr:['moe1','moe2','moe3'],
            classObj:{
                atguigu1:false,
                atguigu2:false,
            },
            styleObj:{
                fontSize: '40px',
                color:'red',
            },
            styleObj2:{
                backgroundColor:'orange'
            },
            styleArr:[
                {
                    fontSize: '40px',
                    color:'blue',
                },
                {
                    backgroundColor:'gray'
                }
            ]
        },
        methods: {
            changeMood(){
                const arr = ['happy','sad','normal']
                const index = Math.floor(Math.random()*3)
                this.mood = arr[index]
            }
        },
    })
</script>

二、条件渲染

1. v-if

   • 写法：
     • v-if="表达式"
     • v-else-if="表达式"
     • v-else="表达式"
   • 适用于：切换频率较低的场景。
   • 特点：不展示的DOM元素直接被移除。
   • 注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。

2. v-show

   • 写法：v-show="表达式"
   • 适用于：切换频率较高的场景。
   • 特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

3. 备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。

<!-- 准备好一个容器-->
<div id="root">
    <h2>当前的n值是:{{n}}</h2>
    <button @click="n++">点我n+1</button>
    <!-- 使用v-show做条件渲染 -->
    <!-- <h2 v-show="false">欢迎来到{{name}}</h2> -->
    <!-- <h2 v-show="1 === 1">欢迎来到{{name}}</h2> -->

    <!-- 使用v-if做条件渲染 -->
    <!-- <h2 v-if="false">欢迎来到{{name}}</h2> -->
    <!-- <h2 v-if="1 === 1">欢迎来到{{name}}</h2> -->

    <!-- v-else和v-else-if -->
    <!-- <div v-if="n === 1">Angular</div>
    <div v-else-if="n === 2">React</div>
    <div v-else-if="n === 3">Vue</div>
    <div v-else>哈哈</div> -->

    <!-- v-if与template的配合使用 -->
    <template v-if="n === 1">
            <h2>你好</h2>
            <h2>moe</h2>
            <h2>北京</h2>
    </template>

</div>

<script type="text/javascript">
    Vue.config.productionTip = false

    const vm = new Vue({
            el:'#root',
            data:{
                name:'moe',
                n:0
            }
    })
</script>

三、总结

本篇主要介绍了Vue中的绑定样式、条件渲染语法及案例。