v-bind如何动态绑定style属性

发布时间:2022-08-10 14:37:47 作者:iii
来源:亿速云 阅读:712

本文小编为大家详细介绍“v-bind如何动态绑定style属性”,内容详细,步骤清晰,细节处理妥当,希望这篇“v-bind如何动态绑定style属性”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

v-bind如何动态绑定style属性

v-bind可以动态设置style属性,用以绑定内联样式。写法:

<!--完整写法-->
<标签名 v-bind:style="vue实例中的数据属性名"/>

<!--简化写法-->
<标签名 :style="vue实例中的数据属性名"/>

一、v-bind动态绑定内联style属性(对象语法)

动态绑定class属性之后,class的值是一个变量,可以将它放到data中动态绑定样式。(学习视频分享:vue视频教程)

1、v-bind:style 的对象语法和CSS语法很像,但他其实是一个 JavaScript 对象

:style="{key(属性名):value(属性值)}"

v-bind如何动态绑定style属性

在写CSS属性名的时候,比如font-size

<h3 :style="{fontSize:'50px'}">{{message}}</h3>
<h3 :style="{'font-size':'50px'}">{{message}}</h3>

注意:如果不采用驼峰命名,就一定要加单引号,因为一旦绑定了vue语法,他就会将里边未加单引号的字符串当成变量名,就算是50px也会被当成变量名,所以如果是字符串就要加上单引号。

value(属性值)有两种实现:被引号包裹或不被引号包裹

<div id="app">
	<!-- 如下:finalSize当成一个固定值来使用 -->
	<h3 :style="{fontSize:'50px'}">{{message}}</h3> 
	
	<!-- 如下:finalSize当成一个变量来使用,通过data动态绑定 -->
	<h3 :style="{fontSize: finalSize + 'px', backgroundColor: finalColor }">{{message}}</h3>
</div>
<script>
const app = new Vue({
    el: "#app",
    data: {
        message: '你好啊!',
        finalSize: 100,
        finalColor: 'red'
    }
})
</script>

v-bind如何动态绑定style属性

2、直接绑定到一个样式对象通常更好,这会让模板更清晰:

<div id="app">
	<!-- 如下:绑定到一个样式对象styleObject,对象中设置对个key:value对 -->
	<h3 :style="styleObject">{{message}}</h3>
</div>
<script>
const app = new Vue({
    el: "#app",
	data: {
		message: '你好啊!',
	        styleObject: {
			color: 'red',
			fontSize: '50px',
			backgroundColor: 'pink'
		}
	}
})
</script>

v-bind如何动态绑定style属性

3、也可以绑定一个返回对象的计算属性

<div id="app">
	<!-- 如下:绑定一个返回对象的计算属性 -->
	<h3 :style="styleObject">{{message}}</h3>
</div>
<script>
const app = new Vue({
    el: "#app",
	data: {
		message: '你好啊!',
		color: 'red',
		fontSize: '50px'
	},
	computed: {
	  styleObject: function () {
		return {
		  color:this.color, fontSize:this.fontSize
		}
	  }
	}

})
</script>

v-bind如何动态绑定style属性

对象语法常常结合返回对象的计算属性使用,用于实现样式切换

示例:红黑颜色的切换

<div id="app">
	<span :style="styleObj" @click="handleFontColor">Hello World</span>
</div>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
			styleObj: {
				color: 'red'
			}
		},
		methods: {
			handleFontColor(){
				this.styleObj.color === 'red' ? this.styleObj.color = 'black' : this.styleObj.color = 'red'
			}
		}
	})
</script>

v-bind如何动态绑定style属性

二、v-bind动态绑定内联style属性(数组语法)

v-bind使用数组方式动态绑定style使用较少,用法为:先在vue实例data部分写好要使用的样式,然后在要使用v-bind动态绑定之处使用数组绑定,数组中包括vue中已定义好的样式名。

数组语法格式为:

:style="[base1,base2]"

v-bind如何动态绑定style属性

v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上:

<div id="app">
	<h3 :style="[baseStyle,baseStyle1]">{{message}}</h3>
</div>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            message: '你好啊!',
            baseStyle: { backgroundColor: 'red' },
            baseStyle1: { fontSize: '100px' },
        }
    })
</script>

v-bind如何动态绑定style属性

自动添加前缀:当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时,如 transform,Vue.js 会自动侦测并添加相应的前缀。

三、v-bind动态绑定内联style属性(多重值)

可以为 style 绑定中的属性提供一个包含多个值的数组,常用于提供多个带前缀的值

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

这样写只会渲染数组中最后一个被浏览器支持的值。

在本例中,如果浏览器支持不带浏览器前缀的 flexbox,那么就只会渲染 display: flex

读到这里,这篇“v-bind如何动态绑定style属性”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注亿速云行业资讯频道。

推荐阅读:
  1. Vue.js 属性绑定 v-bind
  2. HTML标签style属性怎么用

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

style v-bind

上一篇:VUEX状态仓库管理的方法

下一篇:Spring Task定时任务如何实现

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》