Vue特定模板语法实战（一）—— Class 与 Style 绑定

最新推荐文章于 2024-05-15 00:45:57 发布

厚嘴猴

最新推荐文章于 2024-05-15 00:45:57 发布

阅读量422

点赞数

分类专栏： vue学习文章标签： vue vue.js

本文链接：https://blog.csdn.net/jcyka/article/details/105944961

版权

vue学习专栏收录该内容

16 篇文章 1 订阅

订阅专栏

此学习教程是对官方教程的解析，

本章节主要涉及到的官方教程地址：

Class 与 Style 绑定

上一章：Vue入门实战教程（三）—— 视图层：模板及指令

1. 绑定 HTML Class => v-bind:class

1.1 三种绑定方式

要实现如下效果：

<div class="active text-danger">绑定 HTML Class</div>

1.1.1 绑定对象

<div v-bind:class="{ active: isActive, 'text-danger': hasError }">绑定 HTML Class</div>

data: { isActive: true, hasError: true}

或

<div v-bind:class="classObject">绑定 HTML Class</div>

data: { classObject: { active: true, 'text-danger': true} }

或

<div v-bind:class="classObject">绑定 HTML Class</div>

data: { isActive: true, error: true},

computed: {

classObject: function () {

   return {

      active: this.isActive,

      'text-danger': this.error

   }

}

}

1.1.2 绑定数组

<div v-bind:class="[activeClass, errorClass]">绑定 HTML Class</div>

data: { activeClass: 'active', errorClass: 'text-danger' }

1.1.3. 绑定数组和对象的混合

<div v-bind:class="[{ active: isActive }, errorClass]">绑定 HTML Class</div>

data: { isActive: true, errorClass: 'text-danger' }

1.2 `v-bind:class`与普通的 `class` attribute、自定义组件上的`class` property混合使用

1.2.1 v-bind:class 指令也可以与普通的 class attribute 共存，已经存在的 class 不会被覆盖。

<div id="example">
<div
class="static active"
v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>

输出结果：

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

可以看到，class的渲染顺序如下：

普通的 class attribute —> v-bind:class

1.2.2 当在一个自定义组件上使用 class property 时，这些 class 将被添加到该组件的根元素上面。这个元素上已经存在的 class 不会被覆盖。

<my-component class="baz foo"></my-component>

Vue.component('my-component', { template: '<p class="foo bar">Hi</p>' })

输出结果：

<p class="foo bar baz foo">Hi</p>

可以看到，class的渲染顺序如下：

自定义组件的class —> 普通的 class attribute

1.2.3 v-bind:class、普通的 class attribute 、自定义组件的class一起使用的渲染顺序

一个综合的例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style type="text/css">
	.v-bind-class {
		color: red;
		font-size: 30px;
	}
	.common-class {
		font-size:20px
	}
	.component-class {
		color:green; 
		border:1px solid rgb(0, 0, 0)
	}
</style>
</head>

<body>
<div id="example">
	<my-component v-bind:class="vBindClass" class="common-class"></my-component>
</div>

<script>
Vue.component('my-component', { template: '<p class="component-class" >Hi</p>' })
var vm = new Vue({
  el: '#example',
  data: { vBindClass: 'v-bind-class'}
})
</script>
</body>
</html>

运行结果：

为什么是这样的结果呢?

因为class的渲染顺序如下，后面class不会覆盖前面的class

自定义组件的class —> 普通的 class attribute —> v-bind:class

所以样式合并结果为：

如运行结果所示，前面的class样式会覆盖后面class包含的相同样式，即相同样式是前面覆盖后面，最终样式输出结果：

color: green; border: 1px solid rgb(0, 0, 0); font-size: 20px;

2. 绑定内联样式 => v-bind:style

2.1 三种绑定方式

要实现如下效果：

<div style="color: red; font-size: 30px;">绑定内联样式</div>

2.1.1 绑定对象

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data: { activeColor: 'red', fontSize: 30 }

或

<div v-bind:style="styleObject"></div>

data: {

styleObject: { color: 'red', fontSize: '30px' }

}

2.1.2. 绑定样式对象数组

<div v-bind:style="[baseStyles, overridingStyles]"></div>

data: {

baseStyles: {color: 'red'},

overridingStyles: {fontSize: '30px'}

}

2.1.3 绑定一个包含多个值的数组

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。

2.2 `v-bind:`style与普通的 style attribute、自定义组件上的`style` property混合使用

2.2.1 v-bind:style 指令也可以与普通的 style attribute 共存，且会覆盖style attribute同名的样式

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }" style="color:green; border:1px solid rgb(0, 0, 0)">绑定内联样式</div>

data: { activeColor: 'red', fontSize: 30 }

输出结果：

<div style="color: red; border: 1px solid rgb(0, 0, 0); font-size: 30px;">绑定内联样式</div>

为什么是这样的结果呢?

因为样式的输出顺序如下，后面的可以覆盖前面的同名样式

普通的 style attribute —> v-bind:style

所以样式合并结果为：

<p style="color:green; border:1px solid rgb(0, 0, 0); color: red; font-size: 30px;">Hi</p>

后面的样式覆盖前面相同的样式，最终样式输出结果：

color: red; border: 1px solid rgb(0, 0, 0); font-size: 30px;

2.2.2 当在一个自定义组件上使用 style property 时，这些 style将被添加到该组件的根元素上面。这个元素上已经存在同名样式会被覆盖。

<my-component style="color: red; font-size:20px;"></my-component>

Vue.component('my-component', { template: '<p style="color:green; border:1px solid rgb(0, 0, 0)">Hi</p>' })

输出结果：

<p style="color: red; border: 1px solid rgb(0, 0, 0); font-size: 20px;">Hi</p>

为什么是这样的结果呢?

因为样式的输出顺序如下，后面的可以覆盖前面的同名样式

自定义组件的style attribute —> 普通的 style attribute

所以样式合并结果为：

<p style="color:green; border:1px solid rgb(0, 0, 0); color: red; font-size: 20px;">Hi</p>

后面的样式覆盖前面相同的样式，最终样式输出结果：

color: red; border: 1px solid rgb(0, 0, 0); font-size: 20px;

2.2.3 v-bind:style、普通的 style attribute 、自定义组件的style一起使用的渲染顺序

一个综合的例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
<div id="example">
	<my-component v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }" style="font-size:20px"></my-component>
</div>

<script>
Vue.component('my-component', { template: '<p style="color:green; border:1px solid rgb(0, 0, 0)" >Hi</p>' })
var vm = new Vue({
  el: '#example',
  data: { activeColor: 'red', fontSize: 30 }
})
</script>
</body>
</html>

运行结果：

为什么是这样的结果呢?

因为样式的输出顺序如下，后面的可以覆盖前面的同名样式

自定义组件的style —> 普通的 style attribute —> v-bind:style

所以样式合并结果为：

后面的样式覆盖前面相同的样式，即相同样式是后面覆盖前面（与上节的class的样式覆盖顺序是相反的），最终样式输出结果：

color: red; border: 1px solid rgb(0, 0, 0); font-size: 30px;

本章节教程结束。

全部教程地址：Vue入门实战教程 | 寒于水学习网

下一章：Vue入门实战教程（四）—— 模型层：数据

特定模板语法实战：

Vue特定模板语法实战（一）：Class和Style绑定

Vue特定模板语法实战（二）：条件渲染

Vue特定模板语法实战（三）：列表渲染

Vue特定模板语法实战（四）：事件处理

Vue特定模板语法实战（五）：表单输入绑定

厚嘴猴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue特定模板语法实战（一）—— Class 与 Style 绑定

绑定 HTML Class要实现如下效果：.active { border:1px solid #F0F;}.text-danger { color: red;}<div class="active text-danger">绑定 HTML Class</div>1. 绑定对象<div v-bind:clas...
复制链接

扫一扫