架构师

您现在的位置是:首页 > 程序人生 > 前端别闹

前端别闹

vue学习笔记:v-bind绑定class

架构师小跟班 2020-06-03 前端别闹
v-bind绑定class很多时候,我们希望动态的来切换class,比如:当数据为某个状态时,字体显示红色,当数据另一个状态时,字体显示黑色。(一个列表,点击后变蓝色,其他变白色)绑定方式:对象语法

v-bind绑定class

很多时候,我们希望动态的来切换class,比如:当数据为某个状态时,字体显示红色,当数据另一个状态时,字体显示黑色。(一个列表,点击后变蓝色,其他变白色)

绑定方式:对象语法。对象语法的含义是:class后面跟的是一个对象。(对象用{}表示,里面是键值对,值可以是boolean类型,当值为true时添加class属性,为false时不添加)

对象语法有下面这些用法:

<!--最终渲染页面class有active和line-->
<h2 :class="{active:true,line:true}">{{name}}</h2>
<!--最终渲染页面class只有active-->
<h2 :class="{active:true,line:false}">{{name}}</h2>

需求:点击按钮,切换文本颜色

<head>
  <style>
    .active {
      color: red;
    }
  </style>
</head>
<body>
<div id="app">
  <h2 :class="{active:isActive}">点击下方按钮切换颜色</h2>
  <button @click="btnClick">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      isActive: true
    },
    methods: {
      btnClick: function () {
        this.isActive = !this.isActive;
      }
    }
  })
</script>
</body>


文章评论