vue-绑定class样式

喜欢ヅ旅行 2023-07-23 09:56 112阅读 0赞

1、数组语法

我们可以借助于v-bind指令来实现：

HTML：

  1. <div id="app">
  2.     <div v-bind:class="activeClass"></div>
  3.     <div v-bind:class="errorClass"></div>
  4.     <div v-bind:class="[activeClass, errorClass]"></div>
  5. </div>
  6. <script src="./node_modules/vue/dist/vue.js"></script>
  7. <script type="text/javascript">
  8.     var app = new Vue({ 
  9.         el: "#app",
  10.         data: { 
  11.             activeClass: 'active',
  12.             errorClass: ['text-danger', 'text-error']
  13.         }
  14.     })
  15. </script>

渲染后的效果：（具有active和hasError的样式）

在这里插入图片描述

2、对象语法

我们可以传给 v-bind:class 一个对象，以动态地切换 class：

  1. <div v-bind:class="{ active: isActive }"></div>

上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive 的 truthiness（所有的值都是真实的，除了false,0,“”,null,undefined和NaN）。

你可以在对象中传入更多属性来动态切换多个 class。此外，v-bind:class 指令也可以与普通的 class 属性共存。如下模板:

  1. <div class="static"
  2.      v-bind:class="{ active: isActive, 'text-danger': hasError }">
  3. </div>

和如下 data：

  1. data: { 
  2.   isActive: true,
  3.   hasError: false
  4. }

结果渲染为：

  1. <div class="static active"></div>

active样式和text-danger样式的存在与否，取决于isActive和hasError的值。本例中isActive为true，hasError为false，所以active样式存在，text-danger不存在。

发表评论

表情：
评论列表 （有 0 条评论，112人围观）

还没有评论，来说两句吧...

相关阅读

    相关 VUE 样式绑定

    操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接

    蔚落蔚落/ 0 赞/ 456 阅读