5.Vue.js前端框架：样式绑定

news/2024/7/10 2:46:10 标签: javascript, vue, css, js, html

5.1 class 属性绑定

  • 在样式绑定中，首先是对元素的 class 属性进行绑定，绑定的数据可以是对象或数组。

5.1.1 对象语法

  • 在应用 v-bind 对元素的 class 属性进行绑定时，可以将绑定的数据设置为一个对象，从而动态地切换元素的 class。将元素的 class 属性绑定为对象主要有以下三种形式。
1. 内联绑定
  • 内联绑定即将元素的 class 属性直接绑定为对象的形式，格式如下：
html">   <div v-bind : class="{active :isActive}"></div>
  • 上述代码中，active 是元素的 class 类名，isActive 是数据对象中的属性，是一个布尔值。如果该值为 true，则表示元素使用类名为 active 的样式，否则就不使用。例如，为 div 元素绑定 class 属性，将字体样式设置为斜体，代码如下：
html">   <div id="box">
			<div v-bind:class="{active : isActive}">你好，晓茗</div>
		</div>
		   <script type="text/html" title=javascript>javascript">html" title=javascript>javascript">
				var vm = new Vue({
					el : '#box',
					data :{
						isActive : true //使用 active 类名
					},
				});
			</script>
		<style type="text/html" title=css>css">html" title=css>css">
			.active{
				font-style: italic;
			}
		</style>

  • 运行结果如下图所示。
    在这里插入图片描述

  • 在对象中可以传入多个属性来动态切换元素的多个 class。另外，v-bind:class也可以和普通的 class共存。示例代码如下：

html">   <div id="box">
			<div class="default" v-bind:class="{size : isSize , color : isColor}">你好，晓茗</div>
		</div>
		   <script type="text/html" title=javascript>javascript">html" title=javascript>javascript">
				var vm = new Vue({
					el : '#box',
					data :{
						isSize : true , //使用 size 类名
						isColor : true //使用 color 类名
					}
				});
			</script>
		<style type="text/html" title=css>css">html" title=css>css">
			.default{
				text-decoration: underline;
			}
			.size{
				font-size: 18px;
			}
			.color{
				color: #6688FF;
			}
		</style>
  • 上述代码中，isSize 和 isColor 属性的值都为 true，因此结果渲染为：
html">   <div class="default size color">你好，晓茗</div>
  • 当 isSize 或者 isColor 的属性值发生变化时，元素的 class 列表也会相应进行更新。例如，将 isSize 属性值设置为 false，则元素的 class 列表将会变为 “default color”。运行结果如下所示。
    在这里插入图片描述
2. 非内联绑定
  • 非内联绑定即将元素的 class 属性绑定的对象定义在 data 选项中。例如，将上述代码中绑定的对象定义在 data 选项中，示例代码如下：
html">   <div id="box">
			<div class="default" v-bind:class="classObject">你好，晓茗</div>
		</div>
		   <script type="text/html" title=javascript>javascript">html" title=javascript>javascript">
				var vm = new Vue({
					el : '#box',
					data :{
						classObject:{
							size : true , //使用 size 类名
						    color : true //使用 color 类名
						}
						
					}
				});
			</script>
		<style type="text/html" title=css>css">html" title=css>css">
					.default{
						text-decoration: underline;
					}
					.size{
						font-size: 18px;
					}
					.color{
						color: #6688FF;
					}
		</style>
  • 运行结果如下所示。
    在这里插入图片描述
3. 使用计算属性返回样式对象
  • 可以为元素的 class 属性绑定一个返回对象的计算属性。将上述代码中的 class 属性绑定为一个计算属性的代码如下：
html">   <div id="box">
			<div class="default" v-bind:class="show">你好，晓茗</div>
		</div>
		   <script type="text/html" title=javascript>javascript">html" title=javascript>javascript">
				var vm = new Vue({
					el : '#box',
					data :{
						isSize : true , //使用 size 类名
						isColor : true //使用 color 类名
					},
					computed :{
						show : function(){
							return {
								size : this.isSize;
								color : this.isColor;
							}
						}
					}
				});
			</script>
  • 运行结果同上。

5.1.2 数组语法

  • 在对元素的 class 属性进行绑定时，可以把一个数组传给 v-bind:class，以应用一个 class 列表。将元素的 class 属性绑定为数组有如下三种形式。
1. 普通形式
  • 将元素的 class 属性直接绑定为一个数组，格式如下：
html">   <div v-bind:class="[element1,element2]"></div>
  • 上述代码中，element1 和 element2 为数据对象中的属性，它们的值为 class 列表中的类名。例如，应用数组的形式为 div 元素绑定 class 属性，为文字添加删除线并设置文字大小，示例代码如下：
html">   <div id="box">
			<div v-bind:class="[lineClass,sizeClass]">你好，晓茗</div>
		</div>
		   <script type="text/html" title=javascript>javascript">html" title=javascript>javascript">
				var vm = new Vue({
					el : '#box',
					data :{
						lineClass : 'line', //使用 line 类名
						sizeClass : 'size'  //使用 size 类名
					}
				});
			</script>
		<style type="text/html" title=css>css">html" title=css>css">
			.line{
				text-decoration: line-through;
			}
			.size{
				font-size: 17px;
			}
		</style>
  • 运行结果如下所示。
    在这里插入图片描述
2. 在数组中使用条件运算符
  • 在使用数组形式绑定元素的 class 属性时，可以使用条件运算符构成的表达式来切换列表中的 class。示例代码如下。
html">   <div id="box">
			<div v-bind:class="[isLine ? 'line' : '',sizeClass]">你好，晓茗</div>
		</div>
		   <script type="text/html" title=javascript>javascript">html" title=javascript>javascript">
				var vm = new Vue({
					el : '#box',
					data :{
						isLine : true, 
						sizeClass : 'size'  //使用 size 类名
					}
				});
			</script>
		<style type="text/html" title=css>css">html" title=css>css">
			.line{
				text-decoration: line-through;
			}
			.size{
				font-size: 17px;
			}
		</style>
  • 上述代码中，sizeClass 属性对应的类名是始终被添加的，只有当 isLine 为 true 时才会添加 line 类。运行结果同上。
3. 在数组中使用对象
  • 在数组中使用条件运算符可以实现切换元素列表中 class 的目的。但是，如果使用多个条件运算符，这种写法就比较繁琐。这时，可以在数组中使用对象来更新 class 列表。将上述代码中的条件运算符表达式更改为对象的代码如下：
html">   <div id="box">
			<div v-bind:class="[{line : isLine},sizeClass]">你好，晓茗</div>
		</div>
		   <script type="text/html" title=javascript>javascript">html" title=javascript>javascript">
				var vm = new Vue({
					el : '#box',
					data :{
						isLine : true, 
						sizeClass : 'size'  //使用 size 类名
					}
				});
			</script>
		<style type="text/html" title=css>css">html" title=css>css">
			.line{
				text-decoration: line-through;
			}
			.size{
				font-size: 17px;
			}
		</style>
  • 运行结果同上。

5.2 内联样式绑定

  • 在样式绑定中，除了对元素的 class 属性进行绑定之外，还可以对元素的 style 属性进行内联样式绑定，绑定的数据可以是对象或数组。下面分别介绍这两种语法。

5.2.1 对象语法

  • 对元素的 style 属性进行绑定，可以将绑定的数据设置为一个对象。这种对象语法看起来比较直观。对象中的 CSS 属性名可以用驼峰式或短横线分隔命名。将元素的 style 属性绑定为对象主要有以下三种形式。

当 v-bind:style 使用需要特定前缀的 CSS 属性时，Vue.html" title=js>js 会自动侦测并添加相应的前缀。

1. 内联绑定
  • 这种形式是将元素的 style 属性直接绑定为对象。例如，应用对象的形式为 div 元素绑定 style 属性，设置文字的粗细和大小，代码如下：
html">   <div id="box">
			<div v-bind:html" title=css>css">style="{fontWeight : weight, 'font-size' : fontSize +'px'}">你好，晓茗</div>
		</div>
		   <script type="text/html" title=javascript>javascript">html" title=javascript>javascript">
				var vm = new Vue({
					el : '#box',
					data :{
						weight :'bold',//字体粗细
						fontSize :17//字体大小
					}
				});
			</script>
  • 运行结果如下图所示。
    在这里插入图片描述
2. 非内联绑定
  • 这种形式是将元素的 style 属性绑定的对象直接定义在 data 选项中，这样会让模板更加清晰。将上个示例中绑定的对象定义在 data 选项中的代码如下：
html">   <div id="box">
			<div v-bind:html" title=css>css">style="styleObject">你好，晓茗</div>
		</div>
		   <script type="text/html" title=javascript>javascript">html" title=javascript>javascript">
				var vm = new Vue({
					el : '#box',
					data :{
						styleObject :{
							
						}
						fontWeight :'bold',//字体粗细
						'font-Size' :17//字体大小
					}
				});
			</script>
  • 运行结果同上。
3. 使用计算属性返回样式对象
  • 内联样式绑定的对象语法常常结合返回对象的计算属性使用。将上述示例中的 style 属性绑定为一个计算属性的代码如下：
html">   <div id="box">
			<div v-bind:html" title=css>css">style="show">你好，晓茗</div>
		</div>
		   <script type="text/html" title=javascript>javascript">html" title=javascript>javascript">
				var vm = new Vue({
					el : '#box',
					data :{
						weight :'bold',
						fontSize :17
					},
					computed:{
						show : function(){
							return {
								fontWeight : this.weight ,//字体粗细
								'font-size' : this.fontSize +'px'//字体大小
							}
						}
					}
				});
			</script>
  • 运行结果同上。

5.2.2 数组语法

  • 在对元素的 style 属性进行绑定时，可以使用数组将多个样式对象应用到一个元素上。应用数组的形式进行 style 属性的绑定，有如下几种形式。
1. 直接在元素中绑定样式对象
  • 示例代码如下：
html"><div id="box">
			<div v-bind:html" title=css>css">style="[{fontSize :'17px'},{'font-weight' :'bold'},{'text-decoration':'underline'}]">你好，晓茗</div>
		</div>
		   <script type="text/html" title=javascript>javascript">html" title=javascript>javascript">
				var vm = new Vue({
					el : '#box'
				});
			</script>
  • 运行结果如下图所示。
    在这里插入图片描述
2. 在 data 选项中定义样式对象数组
  • 示例代码如下：
html">   <div id="box">
			<div v-bind:html" title=css>css">style="arrStyle">你好，晓茗</div>
		</div>
		   <script type="text/html" title=javascript>javascript">html" title=javascript>javascript">
				var vm = new Vue({
					el : '#box',
					data:{
						arrStyle:[{
							fontSize :'17px'//字体大小
						},{
							'font-weight' :'bold'//字体粗细
						},{
							'text-decoration' :'underline'//下划线
						}]
					}
					
				});
			</script>
  • 运行结果同上。
3. 以对象数组的形式进行绑定
  • 示例代码如下：
html"><div id="box">
			<div v-bind:html" title=css>css">style="[size,weight,decoration]">你好，晓茗</div>
		</div>
		   <script type="text/html" title=javascript>javascript">html" title=javascript>javascript">
				var vm = new Vue({
					el : '#box',
					data:{
						size:{fontSize :'17px'},
						weight:{'font-weight':'bold'},
						decoration:{'text-decoration':'underline'}
					}
					
				});
			</script>
  • 运行结果同上。

备注：后期会继续跟进 Vue.html" title=js>js前端框架：事件处理，希望大家的多多支持和关注。


http://www.niftyadmin.cn/n/1664350.html

相关文章

EntityFramework之摸索EF底层（八）

EntityFramework之摸索EF底层（八）

前言 此篇文章我将深入去摸索edmx中一些不为人知的东西&#xff0c;有时候我们需要知道Code First模型中一些存储以及映射的原理&#xff0c;个人觉得那是必要的也是有用的&#xff0c;因为很有可能SQL会出现一些其他问题&#xff0c;只有掌握了一些必备的原理&#xff0c;这样…
阅读更多...
【数据结构】散列表知识点

【数据结构】散列表知识点

散列存储的特性 散列存储&#xff1a;散列表&#xff0c;采用的存储方式是散列存储。那么何为散列存储呢&#xff1f;散列存储是根据元素的关键字直接计算出该元素的存储地址&#xff0c;又称哈希&#xff08;Hash&#xff09;存储。采用散列存储的方式存储数据时&#xff0c;…
阅读更多...
[日推荐]『钢琴优课』你免费的私人随身钢琴老师

[日推荐]『钢琴优课』你免费的私人随身钢琴老师

2019独角兽企业重金招聘Python工程师标准>>> 小编今天的文艺细胞有点炸&#xff0c;所以看到了这个小程序之后&#xff0c;就迫不及待的想要分享给大家啦&#xff01;没错&#xff0c;这又是一款乐器自学小程序&#xff0c;这次学习的主题是——钢琴。 钢琴优课 **简…
阅读更多...
6.Vue.js前端框架：事件处理

6.Vue.js前端框架：事件处理

1. v-on 事件监听 监听DOM事件使用 v-on 指令。该指令通常在模板中直接使用&#xff0c;在触发事件时会执行一些 JavaScript 代码。 v-on 指令的基本用法 &#xff08;1&#xff09;在 HTML 中使用 v-on 指令&#xff0c;后面可以是所有的原生事件名称。基本用法如下&#x…
阅读更多...
【Linux学习笔记】20：Bash基础-历史命令

【Linux学习笔记】20：Bash基础-历史命令

把操作的记录保存在系统当中&#xff0c;当需要的时候还可以查看和调用&#xff0c;这是一种必要的机制。 最早的Bourne Shell——sh是不支持历史命令的&#xff0c;发展到现在的Bash已经支持的很好了。 [1]history history [选项] [历史命令保存文件] 选项&#xff1a;-c清…
阅读更多...
how to check sap system log ---SM21

how to check sap system log ---SM21

T-code : SM21 this function can check sap system log , the log can display in specific standard, also can analyzing buy user. input sm21, press enter click Reread system log export all log to html file, please see attach 本文转自成杭 51CTO博客&#xff0c;原…
阅读更多...
7.Vue.js前端框架：表单控制绑定

7.Vue.js前端框架：表单控制绑定

1. 绑定文本框 文本框的绑定需要使用 v-model 指令。v-model 指令会根据控件类型自动选择正确的方法来更新元素。在表单中&#xff0c;文本框是最基本的表单控件类型&#xff0c;它分为单行文本框和多行文本框。 1.1 单行文本框 单行文本框用户输入单行文本&#xff0c;可以…
阅读更多...
8.Vue.js前端框架：自定义指令

8.Vue.js前端框架：自定义指令

1、为什么要定义自定义指令 在学习了 Vue 前端框架之后&#xff0c;我们也认识了许多的内置指令&#xff0c;比如&#xff0c;v-for 指令、v-if 指令、v-bind 指令、v-model 指令等等。但是由于这些内置指令都偏向于工具化&#xff0c;而在有些时候需要去实现具体的业务逻辑时…
阅读更多...
最新文章

Copyright @ 2022~2023