VueJS样式绑定v-bind:class

2021-07-09 18:04

阅读：732

标签：new 表达式 strong 实例 error nbsp alt ack cti

class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。

Vue.js v-bind 在处理 class 和 style 时，专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

动态切换多个 class

HTML

DOCTYPE html>
html>
head>
meta charset="utf-8">
title>Vue 测试实例 - 菜鸟教程(runoob.com)title>
script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js">script>
style>
.active {
    width: 100px;
    height: 100px;
    background: green;
}
.text-danger {
    background: red;
}
style>
head>
body>
div id="app">
  div class="static"
     v-bind:class="{ active: isActive, ‘text-danger‘: hasError }">
  div>
div>

script>
new Vue({
  el: ‘#app‘,
  data: {
    isActive: true,
    hasError: true
  }
})
script>
body>
html>

text-danger 类背景颜色覆盖了 active 类的背景色.实际渲染后如下：

div class="static active text-danger">div>

将样式绑定到对象

HTML：

DOCTYPE html>
html>
head>
meta charset="utf-8">
title>Vue 测试实例 - 菜鸟教程(runoob.com)title>
script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js">script>
style>
.active {
    width: 100px;
    height: 100px;
    background: green;
}
.text-danger {
    background: red;
}
style>
head>
body>
div id="app">
  div v-bind:class="classObject">div>
div>

script>
new Vue({
  el: ‘#app‘,
  data: {
    classObject: {
      active: true,
      ‘text-danger‘: true
    }
  }
})
script>
body>
html>

以上效果都是一样的，如下图：

技术分享

computed 对象属性

HTML

DOCTYPE html>
html>
head>
meta charset="utf-8">
title>Vue 测试实例 - 菜鸟教程(runoob.com)title>
script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js">script>
style>
.active {
    width: 100px;
    height: 100px;
    background: green;
}
.text-danger {
    background: red;
}
style>
head>
body>
div id="app">
  div v-bind:class="classObject">div>
div>

script>
new Vue({
  el: ‘#app‘,
  data: {
  isActive: true,
  error: null
  },
  computed: {
    classObject: function () {
      return {
        active: this.isActive && !this.error,
        ‘text-danger‘: this.error && this.error.type === ‘fatal‘,
      }
    }
  }
})
script>
body>
html>

效果为绿色。

数组语法[]

DOCTYPE html>
html>
head>
meta charset="utf-8">
title>Vue 测试实例 - 菜鸟教程(runoob.com)title>
script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js">script>
style>
.active {
    width: 100px;
    height: 100px;
    background: green;
}
.text-danger {
    background: red;
}
style>
head>
body>
div id="app">
    div v-bind:class="[activeClass, errorClass]">div>
div>

script>
new Vue({
  el: ‘#app‘,
  data: {
    activeClass: ‘active‘,
    errorClass: ‘text-danger‘
  }
})
script>
body>
html>

效果为红色。

三元表达式

DOCTYPE html>
html>
head>
meta charset="utf-8">
title>Vue 测试实例 - 菜鸟教程(runoob.com)title>
script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js">script>
style>
.text-danger {
    width: 100px;
    height: 100px;
    background: red;
}
.active {
    width: 100px;
    height: 100px;
    background: green;
}
style>
head>
body>
div id="app">
    div v-bind:class="[errorClass ,isActive ? activeClass : ‘‘]">div>
div>

script>
new Vue({
  el: ‘#app‘,
  data: {
    isActive: true,
    activeClass: ‘active‘,
    errorClass: ‘text-danger‘
  }
})
script>
body>
html>

效果为绿色。

VueJS样式绑定v-bind:class

标签：new 表达式 strong 实例 error nbsp alt ack cti

原文地址：http://www.cnblogs.com/boonya/p/7092649.html

上一篇：Django URLs error: view must be a callable or a list/tuple in the case of include()

下一篇：【2017-06-29】在登录页面自动返回上次请求页面、Js获取table中的行数与列数

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：VueJS样式绑定v-bind:class
文章链接：http://soscw.com/essay/102883.html

亲，登录后才可以留言！

VueJS样式绑定v-bind:class

评论

热门文章

推荐文章

最新文章

置顶文章