Vue 中的style、class样式动态绑定

Vue 中的样式绑定


今天有个朋友问我一个问题,大致是这样的:

问:css中url里面的路径怎么能读取到data里面的内容?

以我目前所学,我回答是不行的。
如果想动态绑定样式,我知道的有三种方法:

1:作为数组形式,通过style绑定data中的属性值,这种方法我觉得最灵活,可以通过三元表达式进行逻辑判断;写起来也是更加美观;

<div class="login-page" :style="[styleBack]"></div>

2:作为对象,通过style绑定data中的属性值;这种方法少的样式属性没问题,但是多了就不美观了;

 <div class="login-page" :style="{background: styleBack.background}"></div>

3:通过绑定class,这种方式我很少用,更多情况下不能随心动态绑定样式;如果逻辑简单,这种方式也是不错的选择;

 <div class="login-page" :style="{styleback: isStyleback}"></div>

代码如下:

<template>
	<div>
		<div class="login-page" :style="[styleBack]"></div>
        <div class="login-page" :style="{background: styleBack.background}"></div>
	</div>
</template>

<script>
export default {
data() {
		return {
				isStyleback: false,
		    	styleBack: {
       			   background: 'url(../../../static/logobak.png)'
       		 }
		}
	},
	methods: {
		change() {
	        this.styleBack.background = 'url(../../../static/logoimg.jpg)'
	      }
      }
}
</script>

<style>
  .login-page {
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: none;
    width: 100px;
    height: 100px;
  }
  .styleback{
  	background: url(../../../static/logobak.png)
  }
</style>
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值