拼搏30天VUE.js之 Class 与 Style 绑定（Part4）

最新推荐文章于 2021-08-10 11:29:17 发布

那是遇知吧

最新推荐文章于 2021-08-10 11:29:17 发布

阅读量279

点赞数 1

分类专栏： VUE.js

VUE.js 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

数据绑定定義：

class 与 style 是 HTML 元素的属性，用于设置元素的样式。因为它们都是属性，我们可以用 v-bind 处理它们：我们只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在v-bind 用于 class 和 style 时，Vue.js 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

來自W3c《Vue.js Class 与 Style 绑定》一文:https://www.w3cschool.cn/vuejs/l1ud1js4.html；

1： active: isActive 设置一个对象

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

<script>
new Vue({
  el: '#app',
  data: {
    isActive: true
  }
})
</script>
</body>
</html>

渲染为：

<div class="active"></div>

解说：

isActive 设置为 true 显示了一个绿色的 div 块，如果设置为 false 则不显示。

2：active: isActive, 'text-danger': hasError（可以在对象中传入更多属性用来动态切换多个 class）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/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>

渲染为：

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

结果为：

3：classObject（也可以直接绑定数据里的一个对象）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/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>

渲染為：

<div class="active text-danger"></div>

結果為：（text-danger 类背景颜色覆盖了 active 类的背景色）

4：绑定返回对象的计算属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
.base {
  width: 100px;
  height: 100px;
}

.active {
  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: {
      value: true,
      type: 'fatal'
    }
  },
  computed: {
    classObject: function () {
      return {
  base: true,
        active: this.isActive && !this.error.value,
        'text-danger': this.error.value && this.error.type === 'fatal',
      }
    }
  }
})
</script>
</body>
</html>

渲染為：

<div class="base text-danger"></div>

結果為：

5：[errorClass ,isActive ? activeClass : '']三元運算符

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/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>

errorClass 是始终存在的，isActive 为 true 时添加 activeClass 类

渲染為：

<div class="text-danger active"></div>

結果為：

6： v-bind:style 直接设置样式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
	<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    activeColor: 'green',
	fontSize: 30
  }
})
</script>
</body>
</html>

渲染為：

<div style="color: green; font-size: 30px;"></div>

結果為：

7：style直接绑定到一个样式对象

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <div v-bind:style="styleObject">菜鸟教程</div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    styleObject: {
      color: 'green',
      fontSize: '30px'
    }
  }
})
</script>
</body>
</html>

渲染為：

<div style="color: green; font-size: 30px;"></div>

結果為：

8：v-bind:style 可以使用数组将多个样式对象应用到一个元素上

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <div v-bind:style="[baseStyles, overridingStyles]">菜鸟教程</div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    baseStyles: {
      color: 'green',
      fontSize: '30px'
    },
	overridingStyles: {
      'font-weight': 'bold'
    }
  }
})
</script>
</body>
</html>

渲染為：

<div style="color: green; font-size: 30px; font-weight: bold;"></div>

結果為：

转载自：菜鸟教程《Vue.js 样式绑定》一文。链接http://www.runoob.com/vue2/vue-class-style.html

9:style字體大小增加減少

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
	<span :style="inlineStyle">Hello Style Binding</span>
	<button @click="plusInlineFontSize">+</button>
<button @click="minusInlineFontSize">-</button>
<span :style="inlineStyle">Hello Style Binding</span>
</div>

<script>
new Vue({
  el: '#app',
  data: {
      inlineStyle: "font-size:12px;font-weight:bold"
  },
	methods: {
    plusInlineFontSize() {
      let styles = this.inlineStyle.split(';');
      this.inlineStyle = styles.map(style => this.countFontSize(style, true)).join(';');
    },
    minusInlineFontSize() {
      let styles = this.inlineStyle.split(';');
      this.inlineStyle = styles.map(style => this.countFontSize(style, false)).join(';');
    },
    countFontSize(style, isPlus){
      let fontSizeIndex = style.indexOf('font-size:');
      if(fontSizeIndex === -1) return style;
      let size = parseInt(style.substring(0 + 'font-size:'.length, style.indexOf('px')));
      size = isPlus ? ++size : --size;
      return `font-size:${size}px`;
    }
  }
})
</script>
</body>
</html>

結果為：

PS：點擊加則文字文相應加一，點擊減則減一。

以 ; 切開字串，取得各個 Style 。
每個 Style 檢查是否是 font-size ，如果是，將數值取出來做加減。

這樣的處理可以使字體大小變化，但這樣的處理脫離了本來操作 Style 的單純動作，已經是在處理字串的重組。

10：style字體大小簡單寫法：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <button @click="fontSize += 1">+</button>
  <button @click="fontSize -= 1">-</button>
  <span :style="objStyle">Hello Style Binding by obj</span> 
</div>

<script>
new Vue({
  el: '#app',
  data: {
    fontSize: 12,
    fontWeight: 'bold'
  },
	computed: {
    objStyle() {
      return {
        fontSize: `${this.fontSize}px`,
        fontWeight: this.fontWeight
      };
    }
  }
})
</script>
</body>
</html>

結果為：

注意：当 v-bind:style 使用需要特定前缀的 CSS 属性时，如 transform ，Vue.js 会自动侦测并添加相应的前缀。

使用 Vue.js 綁定 Style 時， Vue 會幫忙把 -webkit- 、 -moz- ... 等特定瀏覽器的特殊屬性所需的前綴字加上，就不需要自己寫上全部的前綴字了。

那是遇知吧

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
拼搏30天VUE.js之 Class 与 Style 绑定（Part4）

数据绑定定義：class 与 style 是 HTML 元素的属性，用于设置元素的样式。因为它们都是属性，我们可以用v-bind处理它们：我们只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在v-bind用于class和style时，Vue.js 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。來自W3c《Vue.js Class 与 St...
复制链接

扫一扫