vue的class和style动态绑定

最新推荐文章于 2024-09-14 11:07:52 发布

@小朱呀路

最新推荐文章于 2024-09-14 11:07:52 发布

阅读量164

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45441173/article/details/127637701

版权

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="vue.global.js"></script>
  </head>
  <style>
    .box1 {
      background-color: red;
      color: #ffffff;
    }
    .box2 {
      font-weight: bold;
      font-weight: 800;
    }
  </style>
  <body>
    <div id="app">
      <div :class="myclass">你好</div>
      <div :style="mystyle">你好</div>
    </div>
    <script>
      let vm = Vue.createApp({
        data() {
          return {
            // myclass: "box1  box2",
            // myclass: ['box1', 'box2'],
            // myclass: { box1: true, box2: true },
            // style书写
            // mystyle:'background:blue;color:#fff',
            // mystyle:['background:blue','color:#fff']
            mystyle: { background: "blue", color: "#fff" },
          };
        },
      }).mount("#app");

      setTimeout(() => {
        // vm.myclass.pop()//修改class数组的形式
        // vm.myclass.box1 = false;修改class为对象的形式
        // vm.mystyle.push('width:300px')修改style为数组的形式
        vm.mystyle.color = "black";//修改style为对象的形式
      }, 2000);
    </script>
  </body>
</html>