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

无名H

已于 2024-03-24 19:33:34 修改

阅读量1.8k

点赞数 1

文章标签： vue.js

于 2021-01-26 10:44:52 首次发布

本文链接：https://blog.csdn.net/qq_40358970/article/details/113173906

版权

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>