vue中的样式绑定

最新推荐文章于 2025-03-23 15:02:33 发布

原创最新推荐文章于 2025-03-23 15:02:33 发布 · 264 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #样式绑定 #class #style

vue基础学习专栏收录该内容

15 篇文章

订阅专栏

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。

1. class的对象绑定

我们直接来看一个例子，当我们想给模板中的元素添加样式时，可以传给 v-bind:class 一个对象，以动态地切换 class：

:class="{activated:isActivated}"

上面的语法表示 activated 这个 class 存在与否将取决于数据属性isActivated为true还是false。下面见完整的例子，我们可以进一步结合事件（控制isActivated）来实现点击变换颜色的效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue中的样式绑定1</title>
  <style>
    .activated{
      color: red;
    }
  </style>
  <script src="../node_modules/vue/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <div @click="handleClick"
          :class="{activated:isActivated}">  <!--这个div上绑定的一个类，类和一个
          对象activated绑定，显示与否取决于后面的变量isActivated是true还是false-->
      <!--花括号里的就是js表达式-->
      hello world
    </div>
  </div>
  <script>
    var vm=new Vue({
      el:"#app",
      data:{
        isActivated: true
      },
      methods:{
        handleClick:function () {
          this.isActivated=!this.isActivated
        }
      }
    })
  </script>
</body>
</html>

2. class的数组绑定

同样通过一个例子来学习，我们绑定一个绑定一个class数组，显示什么内容由activated和activatedOne这两个“变量”决定：

:class="[activated,activatedOne]"

下面见完整的实现：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue中的样式绑定2</title>
  <style>
    .activated{
      color: red;
    }
    .activated-one {
      font-size: 56px;
    }
  </style>
  <script src="../node_modules/vue/dist/vue.js"></script>
</head>

<body>
<div id="app">
  <div @click="handleClick"
       :class="[activated,activatedOne]">  <!--绑定一个class，显示什么内容由activated和
       activatedOne这两个“变量”决定-->
    hello world
  </div>
</div>
<script>
  var vm=new Vue({
    el:"#app",
    data:{
      activated:"",  /*但activated这个变量一开始为空，所以一开始肯定是黑色的文字*/
      activatedOne:"activated-one"
    },
    methods:{
      handleClick:function () {
        this.activated=this.activated==="activated" ? "":"activated"
      }
    }
  })
</script>
</body>
</html>

效果：
点击前

点击后
在这里插入图片描述
3. 样式绑定–style

通常直接将样式绑定到一个样式对象，显得直观简洁：

:style="styleObj"

同样我们结合点击事件实现切换样式的效果，以下是完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue中的样式绑定3</title>
  <script src="../node_modules/vue/dist/vue.js"></script>
</head>

<body>
<div id="app">
  <div :style="styleObj" @click="handleDivClick">  <!--styleObj对应的一定是个表达式-->
    hello world
  </div>
</div>
<script>
  var vm=new Vue({
    el:"#app",
    data:{
      styleObj: {
        color:"black"
      }
    },
    methods:{
      handleDivClick:function () {
        this.styleObj.color=this.styleObj.color==="black"?"red":"black"
      }
    }
  })
</script>
</body>
</html>