class绑定

最新推荐文章于 2022-08-28 00:39:26 发布

weixin_43331769

最新推荐文章于 2022-08-28 00:39:26 发布

阅读量180

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_43331769/article/details/104044163

版权

vue 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

Vue.js - class绑定

一、class绑定属性
- :class = "{imgsize: isActive}
二、class绑定对象

一、class绑定属性

:class = "{imgsize: isActive}

其中imgsize为class属性名，当isActive的值为true的时候执行class属性名为imgsize的css样式
:class = “[‘active’, ‘sze’]” 还可以同时为标签绑定多个class属性

  <style type="text/css">
    .active{
      color: red;
    }
    .imgsize{
      width: 400px;
      height: 1200px;
    }
  </style>
  <script src="vue.js"></script>
  <script>
    window.onload = function(){
      let vm;
      vm = new Vue({
        el: '#app',
        data: {
          isActive: true,
          imgUrl: '..\\img\\_510735865_mmexport1579333094865_1579333094000_xg.jpg',
        },
        methods: {
          btnClick() {
            this.isActive = !this.isActive;
          },
        },
      });
    }

  </script>
<body>
    <div id="app">
        <div :class = "{active:isActive}">字体变化 </div>
        <div :class = "['active', 'sze']">我是数组 </div>
        <button @click="btnClick">改变class</button>
        <div>
          <img :src="imgUrl" :class = "{imgsize: isActive}">
        </div>
    </div>
</body>