v-bind动态绑定class

最新推荐文章于 2024-06-13 15:01:17 发布

jwz934738949

最新推荐文章于 2024-06-13 15:01:17 发布

阅读量294

点赞数

分类专栏： Vue基础

本文链接：https://blog.csdn.net/jwz934738949/article/details/106738228

版权

Vue基础专栏收录该内容

59 篇文章 1 订阅

订阅专栏

v-bind的作用：动态地绑定一个或多个 attribute，或一个组件 prop 到表达式，v-bind可以简写为 :

v-bind可以动态绑定class，可以绑定对象或者为数组

绑定对象时：

v-bind可以绑定一组键-值，也可以绑定多组键-值；
v-bind动态绑定class时，不会影响标签原有的class；
v-bind也可以绑定方法，方法的内容为对象；
绑定class的形式：v-bind="{键(string):值(boolean)}"

绑定数组时：

v-bind绑定方法的内容为数组；
绑定class的形式：v-bind="[数组名称]"

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue计数器</title>
  <style>
    .active {
      color: blue;
    }
  </style>
</head>
<body>
<div id="app">
  <p v-bind:class="{active: isActive}">测试文本</p>
  <p :class="[test1, test2, 'active']">测试文本2</p>
  <button @click="btnChange">点击切换颜色</button>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '文本内容',
      isActive: true,
      test1: 'classP1',
      test2: 'classP2'
    },
    methods: {
      btnChange: function () {
        this.isActive = !this.isActive
      }
    }
  })
</script>
</body>
</html>

jwz934738949

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-bind动态绑定class

v-bind的作用：动态地绑定一个或多个 attribute，或一个组件 prop 到表达式，v-bind可以简写为 :v-bind可以动态绑定class，可以绑定对象或者为数组绑定对象时：v-bind可以绑定一组键-值，也可以绑定多组键-值； v-bind动态绑定class时，不会影响标签原有的class； v-bind也可以绑定方法，方法的内容为对象；绑定class的形式：v-bind="{键(string):值(boolean)}"绑定数组时：v-bind绑定方法的内容为数组
复制链接

扫一扫

专栏目录