Vue内置指令之v-bind绑定class的介绍与举例

v-bind主要用于解决HTML元素属性值的绑定问题，用于响应更新HTML元素的属性，将一个或多个属性或一个组件的prop动态绑定到表达式。v-bind绑定class，绑定方式：对象语法，含义class后面跟的是一个对象用法：1.直接通过{}绑定一个类<h2 :class = "{'active':isActive}">Hello World</h2>2.通过判断传入多个值

好的！文西

6066人浏览 · 2021-01-26 20:53:32

好的！文西 · 2021-01-26 20:53:32 发布

v-bind主要用于解决HTML元素属性值的绑定问题，用于响应更新HTML元素的属性，将一个或多个属性或一个组件的prop动态绑定到表达式。
v-bind绑定class，绑定方式：对象语法，含义class后面跟的是一个对象
用法：

	 1.直接通过{}绑定一个类
     <h2 :class = "{'active':isActive}">Hello World</h2>
     2.通过判断传入多个值
     <h2 :class="{'active':isActive,'line':isLine}"></h2>
     3.和普通的类同时存在，并不冲突(如果isActive和isLine都为true，那么会有title/active/line共存)
     <h2 :class = "title" :class="{'active':isActive,'line':isLine}"></h2>
     4.如果过于复杂，可以放在一个methods或者computer中（classes是一个计算属性）
     <h2 class="title" :class="classes">Hello World</h2>

应用举例（点击按钮，将v-bind绑定的class属性改变，显示为字体颜色的改变）：

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .active {
      color: red;
    }
  </style>
</head>
<body>
<div id = "app">
  <h2 v-bind:class="{active: isActive, line: isLine}">{{message}}</h2>
  <!--<h2 v-bind:class="getClasses()">{{message}}</h2>将过于复杂的class内容放到方法中-->
  <button v-on:click="btnClick">按钮</button> <!--点击按钮字体颜色改变-->
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message:'你好',
            isActive:true,
            isLine:true
        },
        methods:{
            btnClick: function () {
              this.isActive = !this.isActive
            }
           /* getClasses:function () {//上面注释所用的代码
              return {active: this.isActive, line: this.isLine}
            }*/
        }
    })
</script>
</body>
</html>

效果图：
在这里插入图片描述

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}$/, //不连续的两位字母// /^