前端框架vue.js系列（3）：样式语法

Bertha 。 2021-09-14 06:20 399阅读 0赞

根据以往vue的实际开发经验，需求中常常需要动态变化某些元素样式，如选中当前项时样式变为高亮。这时使用vue原生自带的方法来修改样式会更加方便。通常vue调用样式有3种语法，它们分别是：内联语法、对象语法及数组语法。

# **内联语法** #

用:style="\{\}"的方式按原生格式添加样式,如:style="\{color:'red',fontWeight:'bold' \}"

<p :style="{color:'greenyellow',fontWeight:'bold' }">内联语法</p>

# **对象语法** #

这种语法是最常用的语法，格式为:class="\{样式:真假\}"，当为真时添加样式，当为假时移除样式。

<style type="text/css">
    	.add_active {
    		color: greenyellow;
    	}
    	
    	.add_bigsize {
    		font-size: 30px;
    	}
    </style>
    
    
    <p :class="{add_active:true,add_bigsize:false}">对象语法</p>

（注）对象语法中的真假可与vue实例中data的值绑定，如<p :class="\{add\_active:isActive\}"></p>  
另外，对象语法还可以把整个样式对象设到data中：如

<style type="text/css">
    	.add_active {
    		color: greenyellow;
    	}
    	
    	.add_bigsize {
    		font-size: 30px;
    	}
    </style>
    
    
    <p :class="objectClass">对象语法2</p>
    
    <script>
    	var vue = new Vue({
    		el: "#app",
    		data: {
    			objectClass: {
    				add_active: true,
    				add_bigsize: false
    			}
    		}
    	});
    </script>

对象语法样式还可以通过vue实例的computed计算出来，如：

<style type="text/css">
    	.add_active {
    		color: greenyellow;
    	}
    </style>
    
    
    <p :class="objectComputed">对象语法3</p>
    
    <script>
    	var vue = new Vue({
    		el: "#app",
    		data: {
    			//对象语法
    			isActive: true
    		},
    		computed: {
    			objectComputed: function() {
    				return {
    					add_active: this.isActive && this.isActive == true //优先级低于data设值，即上一个例子
    				}
    			}
    		}
    	});
    </script>

#    **数组语法** #

直接填入数组，数组项为vue实例data里的值，该值内容为样式名称，默认为true。

<style type="text/css">
    	.add_active {
    		color: greenyellow;
    	}
    	
    	.add_bigsize {
    		font-size: 30px;
    	}
    </style>
    
    <p :class="[arrActive,arrBigSize]">数组语法</p>
    
    <script>
    	var vue = new Vue({
    		el: "#app",
    		data: {
    			arrActive: "add_active",
    			arrBigSize: "add_bigsize",
    		}
    	});
    </script>

运行结果：

<div class="add_active add_bigsize">动态样式法</div>

若需要在数组语法中判断真假，可以使用三元表达式，如：

<style type="text/css">
    	.add_active {
    		color: greenyellow;
    	}
    	
    	.add_bigsize {
    		font-size: 30px;
    	}
    </style>
    
    <p :class="[arrActiveBo ? arrActive : '', arrBigSize]">数组语法2</p>
    
    <script>
    	var vue = new Vue({
    		el: "#app",
    		data: {
    			arrActiveBo: true,
    			arrActive: "add_active",
    			arrBigSize: "add_bigsize",
    		}
    	});
    </script>

数组语法还可以在数组中把项设置为对象，设置方法与对象语法相同。

<p :class="[{add_active:arrActiveBo},arrBigSize]">数组语法3</p>

若设置元素为自定义组件，即可以在template按原生的方式增加样式，也可以在新组件元素上按对象语法和数组语法添加样式。如：

<style type="text/css">
    	.add_active {
    		color: greenyellow;
    	}
    	
    	.add_bigsize {
    		font-size: 30px;
    	}
    </style>
    
    <my-component :class="{add_active: isActive }"></my-component>
    
    <script>
    	Vue.component('my-component', {
    		template: '<p class="add_bigsize">组件语法</p>'
    	})
    	var vue = new Vue({
    		el: "#app",
    		data: {
    			isActive: true,
    		}
    	});
    </script>

通过计算属性动态设置类名 ：

<div :class="p4Classes">动态样式法</div>
    
    <script>
    	export default {
    		name: 'learn',
    		data() {
    			return {
    				size: "large",
    				disabled: true
    			}
    		},
    		computed: {
    			p4Classes: function() {
    				return ["btn",
    					{
    						["btn-" + this.size]: this.size !== "",
    						["disabled"]: this.disabled
    					}
    				]
    			}
    		},
    		components: {},
    		methods: {},
    		mounted() {}
    	}
    </script>

运行结果：

<div class="btn btn-large disabled">动态样式法</div>

发表评论取消回复

表情：

评论列表（有 0 条评论，399人围观）

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

相关阅读

相关 Web(六)CSS3语法-背景样式

第1关：CSS背景相关的概念 ![285fb093b39b4e5296615feb495c4a89.png][] 第2关：CSS-背景色的设置编程要求

水深无声/ 2023年09月30日 17:21/ 0 赞/ 31 阅读

相关前端框架系列之（mvc）

前言前面我们写了三篇关于es装饰器的文章了，感兴趣的可以去看看： [前端框架系列之（装饰器Decorator）][Decorator] [前端框架系列之（

我会带着你远行/ 2023年02月18日 08:01/ 0 赞/ 52 阅读

相关前端实例3——透视框（css样式）

效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmN

爱被打了一巴掌/ 2023年02月08日 15:52/ 0 赞/ 48 阅读

相关【Vuejs】1043- Vuejs 项目前端多语言方案

![db263676db27b466278c9ea270c9e115.png][] 作者：Paian http://mobilesite.github.io 前端的国

雨点打透心脏的1/2处/ 2022年09月03日 15:20/ 0 赞/ 363 阅读

相关 Vuejs——（3）计算属性，样式和类绑定

先上总结：（十九）标签和API总结（2） vm指new Vue获取的实例 ①当dom标签里的值和data里的值绑定后，更改data对应的值可以实时更新标签里的

偏执的太偏执、/ 2022年07月17日 03:54/ 0 赞/ 91 阅读

相关 Vuejs框架的总结

前端知识点总结——Vue 2018-04-15 [web前端开发][web] 1.框架和库的区别框架（framework）：有着自己的语法特点、都

素颜马尾好姑娘i/ 2022年05月27日 08:26/ 0 赞/ 259 阅读

相关响应式前端框架Bootstrap系列（3）段落、文字相关

本篇主要分享关于bs中段落、文本的组件样式，是一些较简单的样式实现。段落元素用<p>表示，较常用与段落元素样式有：文字颜色、背景颜色和对齐方式。文字颜色样式主要有以下6

矫情吗；*/ 2021年09月14日 14:00/ 0 赞/ 240 阅读

相关 react系列（2）表达式及样式语法

React表达式用两个大括号\{ \}表示。简单来说，就是在元素标签中\{ \}里的js脚本可以被执行，有点类似于jsp的<%= %>。在表达式中不建议有太多逻辑实现，主要目的

╰半橙微兮°/ 2021年09月14日 10:18/ 0 赞/ 358 阅读

相关前端框架vue.js系列（3）：样式语法

根据以往vue的实际开发经验，需求中常常需要动态变化某些元素样式，如选中当前项时样式变为高亮。这时使用vue原生自带的方法来修改样式会更加方便。通常vue调用样式有3种语法，它

Bertha 。/ 2021年09月14日 06:20/ 0 赞/ 400 阅读

相关 Vuejs基本知识(十)【使用样式】

样式用起来特别简单. 直接写到 `<style>` 段落里面即可. 如下代码所示： <template> <div class='hi'>

墨蓝/ 2021年06月26日 16:06/ 0 赞/ 557 阅读