Vue起步_Vue中的样式绑定

最新推荐文章于 2022-08-30 19:47:27 发布

小斌斌阿

最新推荐文章于 2022-08-30 19:47:27 发布

阅读量180

点赞数

分类专栏： Vue学习笔记文章标签： Vue 学习笔记

本文链接：https://blog.csdn.net/qq_17832583/article/details/80566978

版权

Vue学习笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

第一种方式：class的对象绑定

<body>
  <div id="app">
    <div @click="handleDivClick"
         :class="{activated: isActivated}"
    >
       Hello World
    </div>
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        isActivated: false
      },
      methods: {
        handleDivClick: function() {
          this.isActivated = !this.isActivated;
        }
      }
    })
  </script>
</body>

如果isActivated为true，则绑定class=“activated”

为activated绑定样式：

<style>
    .activated {
      color: red;
    }
  </style>

实现点击Hello World一次变红色，再点击一次变黑色。

第二种方式：class的数组绑定

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue的样式绑定</title>
  <script src="./vue.js"></script>
  <style>
    .activated {
      color: red;
    }
  </style>
</head>
<body>
  <div id="app">
    <div @click="handleDivClick"
         :class="[activated]"
    >
       Hello World
    </div>
  </div>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        activated: ""
      },
      methods: {
        handleDivClick: function() {
          this.activated = this.activated === "activated"?
            "" : "activated"
        }
      }
    })
  </script>
</body>
</html>

第三种方式：style的对象绑定

<body>
  <div id="app">
    <div @click="handleDivClick"
         :style="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>

第四种方式：style的数组绑定

<body>
  <div id="app">
    <div @click="handleDivClick"
         :style="[styleObj,{fontSize: '20px'}]"
    >
       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>

小斌斌阿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue起步_Vue中的样式绑定

第一种方式：class的对象绑定&lt;body&gt; &lt;div id="app"&gt; &lt;div @click="handleDivClick" :class="{activated: isActivated}" &gt; Hello World &lt;/div&gt; &lt;/div&amp
复制链接

扫一扫