Vue 06 | 动态class_vue class 怎么用函数-CSDN博客

本文链接：https://blog.csdn.net/2202_75396973/article/details/148640709

对象语法

基本语法

<!-- 传入class对象 -->
<div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
--------------------------------------------------------

<body>
    <script src="vue.js"></script>
    <div id="app">
        <div v-bind:class="{active:isActive,'text-danger':hasError}"></div>
    </div>
    <script>
        new Vue({
            el:'#app',
            data(){
                return {
                    isActive:false,
                    hasError:true
                }
            }
        })
    </script>
</body>

绑定一个class传入一个对象，active属性名是需要展示的class名称，其值isActive是个布尔值，true为当前的class名称，false就是不显示；后面的属性名也是类似的，true显示，false不显示
需要给对象中的值在data中进行定义
上面的代码结果可以看到是div标签中class被赋予的是’text-danger’；如果isActive为true，则会多一个active

<!-- v-bind:class 指令也可以与普通的 class attribute 共存 -->
<div
  class="static"
  v-bind:class="{ active: true, 'text-danger': false }"
></div>

一个class属性与一个动态的class属性，两者并存，因为有的class就是要默认显示在html上，动态的class用来处理一些行为，如点击后添加样式等
把上述代码替换掉前面的html中对应部分，就会在控制台中可以查看到class值为static active，static是默认显示，active是动态的，

（实际开发中）可以动态修改class的值

前面的代码，我们在v-bind中传入对象，但是在实际项目中，一般是把这个对象定义在data数据中，

new Vue({
    el:'#app',
    data: {
        return {
            classObj: {
                isaAtive: false,
                item: true
            }
        }
	},
    methods: {
        setActive() {
            this.classObj.isaAtive = !this.classObj.isaAtive
        }
    }
})

前面还通过v-bind传入，还定义一个button按钮并绑定一个click事件

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<div id="app">
   <div v-bind:class="classObj"></div>
   <button @click="setActive">修改class</button>
</div>

效果是：当点击按钮时，修改classObj这个对象中的一个属性，点击按钮，class由item改为isaAtive item，实际就是修改对象中isaActive的值，使其显示与否，每一次点击都能够使其值发生变化，从而有显示与关闭的效果

可以绑定一个计算数据来实现

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<div id="app">
   <div v-bind:class="classObject"></div>
   <button @click="setActive">修改class</button>
</div>

data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

添加computed计算数据，监听data数据，当active发生变化后，返回class对象

数组语法

基本语法

在class中传入一个数组

<!-- 传入一个数组,数组元素是要显示的class名称 -->
<div v-bind:class="[activeClass, errorClass]"></div>

<!-- 可以使用三元表达式,通过动态修改isActive,实现class名称变化-->
<div v-bind:class="[isActive ? 'active' : '', 'text-danger']"></div>

<!--数组中也可以使用对象语法-->
<div v-bind:class="[{ active: isActive }, 'text-danger']"></div>

注意在组件上绑定class会添加到该组件的根元素上面

const cp1 = {
    template:'<div>我是一个组件</div>'
}
// 在Vue实例中添加components对象
components:{
    test:cp1
}
// 将这个组件在页面中进行引入

<div id='app'>
    <test class="container"/>
    <!--<test />-->
</div>

没有设置class时，在控制台代码中的div里面没有内容
当设置了class时，代码div标签中能够显示出container
根元素就是当前组件的最外层标签，比如

<div><p>这是一个组件</p></div>

像这样嵌套，最后只会作用在外层的div中

绑定内联样式

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：

<!-- 传入一个对象 -->
<div v-bind:style="{ color: 'red', fontSize: 30 + 'px' }"></div>