Vue.js学习过程记录——class列表样式、style内联样式绑定及条件渲染（第三天）

本文链接：https://blog.csdn.net/qq_38178056/article/details/103649068

Vue.js学习过程记录——class列表样式、style内联样式绑定及条件渲染

今天主要学习的是Vue.js当中class样式、style内联样式绑定以及条件渲指令相关的内容，接下来就详细描述学习的内容以及需要注意的内容！上代码！
1.class列表样式绑定：v-bind
语法格式：

v-bind:class='表达式' 或者 :class='表达式'

其中，class的表达式可以为：
（1）字符串——:class="activeClass"
（2）对象——:class="{active:isActive,error:hasError}"
（3）数组——:class="['active','leave','error']"
注意：数组中必须要加上单引号，否则它获取的就是data中的属性
相关代码如下：
（1）html代码：

<div id="app">
         <h3>class样式绑定，v-bind:class='表达式'  或者  :class='表达式'</h3>
         <!-- 这种是写死的方法，我们需要进行动态获取 -->
         <!-- <p class='active'>字符串表达式</p> -->
         <!-- 动态绑定字符串表达式的class样式 -->
         <p v-bind:class="activeClass">字符串表达式</p>

          <!-- 动态绑定对象表达式的class样式 -->
         <p v-bind:class="{active:isActive,error:isError}">对象表达式</p>

         <!-- 动态绑定数组表达式的class样式  注意：一定要使用单引号，否则获取的就是data中的值-->
         <p v-bind:class="['active','leave','error']">数组表达式</p>
</div>

（2）CSS代码：

<style>
          .active{
               color:brown;
          }
          .leave{
               background-color: blue;
          }
          .error{
               font-size: 50px;
          }
</style>

（3）JavaScript代码：

<script>
         var vm = new Vue({
            el: '#app',
            data: {
               activeClass:"active",
               isActive:true,
               isError:true,
            },
            methods:{}
         })
    </script>

2.style内联样式绑定：v-bind
语法格式：

v-bind:style='表达式' 或者 :style='表达式'

ps：style的表达式一般为对象
因此格式一般是：:style="{color:activeColor,fontSize:fontSize+'px'}"
注意：对象中的value值activeColor和fontSize是data中的属性
（1）html代码如下：

<h3>style内联样式绑定，v-bind:class='表达式' 或者 :class='表达式'</h3>
         <!-- 对象中的value值activeColor和fontSize是data中的属性 -->
         <p :style="{color:activeColor,fontSize:fontSize+'px'}">style内联样式绑定</p>

（2）JavaScript代码：

<script>
         var vm = new Vue({
            el: '#app',
            data: {
               activeColor:"red",
               fontSize:100
            },
            methods:{}
         })
    </script>

样式绑定完整源码：

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Document</title>
     <script src="./lib/vue.js"></script>
     <style>
          .active{
               color:brown;
          }
          .leave{
               background-color: blue;
          }
          .error{
               font-size: 50px;
          }
     </style>
</head>
<body>
     <div id="app">
         <h3>class样式绑定，v-bind:class='表达式'  或者  :class='表达式'</h3>
         <!-- 这种是写死的方法，我们需要进行动态获取 -->
         <!-- <p class='active'>字符串表达式</p> -->
         <!-- 动态绑定字符串表达式的class样式 -->
         <p v-bind:class="activeClass">字符串表达式</p>

          <!-- 动态绑定对象表达式的class样式 -->
         <p v-bind:class="{active:isActive,error:isError}">对象表达式</p>

         <!-- 动态绑定数组表达式的class样式  注意：一定要使用单引号，否则获取的就是data中的值-->
         <p v-bind:class="['active','leave','error']">数组表达式</p>

         <h3>style内联样式绑定，v-bind:class='表达式' 或者 :class='表达式'</h3>
         <!-- 对象中的value值activeColor和fontSize是data中的属性 -->
         <p :style="{color:activeColor,fontSize:fontSize+'px'}">style内联样式绑定</p>
     </div>
</body>
    <script>
         var vm = new Vue({
            el: '#app',
            data: {
               activeClass:"active",
               isActive:true,
               isError:true,
               activeColor:"red",
               fontSize:100
            },
            methods:{}
         })
    </script>
</html>

结果显示效果图：
在这里插入图片描述
3.条件渲染：v-if
（1）v-if：是否渲染当前元素；
（2）v-else-if：当满足条件是否渲染当前元素；
（3）v-else：当前面的条件不成立，则渲染当前元素；
（4）v-show和v-if类似，只是v-show渲染的元素始终在DOM中，只是通过CSS属性display：none来进行切换；
相关代码如下：
（1）html代码

<div id="app">
         <h3>条件渲染：v-if</h3>
         <input v-model="seen" type="checkbox">勾选后显示红色小块
         <div v-if="seen" class="box"></div>
         <p v-else="seen">红色小块隐藏了</p>
         <h3>v-show条件渲染</h3>
         <div v-show="seen" class="box"></div>
     </div>

（2）CSS代码：

<style>
         .box{
             height: 200px;
             width: 200px;
             background-color: red;
         }
</style>

（3）JavaScript代码：

<script>
         var vm = new Vue({
            el: '#app',
            data: {
                seen:false,
            },
            methods:{}
         })
</script>

效果显示如下：
在这里插入图片描述

在这里，特别总结一下v-if和v-show的区别，因为在面试当中也会经常被问到：
1.什么时候被渲染？
（1）v-if如果初始条件为false时，则什么也没有也不渲染，只要条件为true了，就会重新渲染；
（2）v-show不管初始条件是什么，元素都会被渲染，只是通过CSS属性display：none来进行切换；
2.使用场景的选择
（1）v-if有更高的切换开销，当资源多切换频率多时切换消耗大；
（2）v-show有更高的初始渲染开销
总结：因此，如果切换比较频繁的话，使用v-show比较好，当渲染后条件很好改变吗，则使用v-if比较好！