Vue中Class和Style几种v-bind绑定的用法-详解案例_vue style使用v-bind

2401_84413092

于 2024-04-29 12:01:49 发布

阅读量447

点赞数 18

分类专栏：程序员文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2401_84413092/article/details/138308160

版权

程序员专栏收录该内容

196 篇文章 0 订阅

订阅专栏

渲染结果与上面相同

<button class="btn btn-primary active"></button>

除此之外，我们还可以使用计算属性去绑定元素的 class

<button v-bind:class="activeClass"></button>
<script>
    var vm = new Vue({
      el: "#app",
      data: {
        isActive: true
      },
      computed: {
        activeClass() {
          return {
            active: this.isActive
          }
        }
      }
    });
</script>

数组语法绑定 Class

Vue 中还支持我们给元素利用数组的方式添加 class，我们修改上面对象添加 class 的例子。

<button class="btn" v-bind:class="[primary, active]"></button>
<script>
    var vm = new Vue({
      el: "#app",
      data: {
        primary: 'btn-primary',
        active: 'btn-active'  
      }
    });
</script>

上面方式我们绑定了固定不变的，如果我们需要动态的切换 class 怎么办呢？我们可以利用三元表达式或者在数组中使用对象语法。

//三元表达式
<button v-bind:class="[isActive ? active : '', primary]"></button>
<script>
    var vm = new Vue({
      el: "#app",
      data: {
        isActive: true,
        primary: 'btn-primary',
        active: 'btn-active'  
      }
    });
</script>

//数组中使用对象语法
<button v-bind:class="[{active: isActive}, primary]"></button>
<script>
    var vm = new Vue({
      el: "#app",
      data: {
        isActive: true,
        primary: 'btn-primary'
      }
    });
</script>

对象语法绑定 Style

绑定内联样式时的对象语法，看起来非常像 css，但他其实是一个 Javascript 对象，我们可以使用驼峰式或者短横线分隔命名。

<div v-bind:style="{color: colorStyle, backgroundColor: background}">
对象语法
</div>
<script>
    var vm = new Vue({
      el: "#app",
      data: {
        colorStyle: 'red',
        background: 'blue'
      }
    });
</script>

与 class 类似我们也可以使用数据对象的方式绑定。

<div v-bind:style="style">对象语法</div>
<script>
    var vm = new Vue({
      el: "#app",
      data: {
        style: {
          color: 'red',
          backgroundColor: 'blue'
        }
      }
    });
</script>

数组语法绑定 Style

Vue 允许我们同时绑定多个样式对象作用于同一个对象上。

<div v-bind:style="[style, fontStyle]">对象语法</div>
<script>
    var vm = new Vue({
      el: "#app",
      data: {
        style: {
          color: 'red',
          backgroundColor: 'blue'
        },
        fontStyle: {
          fontSize: '18px'
        }
      }
    });
</script>