vue(5)：样式绑定

最新推荐文章于 2023-12-25 00:30:23 发布

无知的小菜鸡

最新推荐文章于 2023-12-25 00:30:23 发布

阅读量154

点赞数

分类专栏： vue基础

本文链接：https://blog.csdn.net/weixin_41897680/article/details/106395347

版权

vue基础专栏收录该内容

68 篇文章 14 订阅

订阅专栏

样式绑定

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

一、 HTML Class

对象语法
示例1：

<style type="text/css">
	.class1 {
		font-size: 20px;
	}

	.isRed {
		color: red;
	}

	.isThrough {
		text-decoration: line-through;
	}
</style>
</head>

<body>
<div id="app">
	<p :class="{'isRed':is_red,'isThrough':is_through }" class="class1">绑定样式</p>
</div>

<script>
	var vm = new Vue({
		el: "#app",
		data: {
			is_red: true,
			is_through: true
		}
	})
</script>

（1）可以在对象中传入多个字段来动态切换多个 class
（2）v-bind:class 指令也可以与普通的 class attribute 共存。

示例2：

//方式二（放在data里面）
<div id="app">
	<p :class="classObject">绑定样式</p>
</div>

<script>
	var vm = new Vue({
		el: "#app",
		data: {
			classObject: {
				'isRed': true,
				'isThrough': true
			}
		}
	})
</script>

示例3：


//方式三（使用computed属性）
<div id="app">
	<p :class="classObject">绑定样式</p>
</div>

<script>
	var vm = new Vue({
		el: "#app",
		data: {
			'is_red': true,
			'is_through': true
		},
		computed: {
			classObject: function() {
				return {
					'isRed': this.is_red,
					"isThrough": this.is_through
				}
			}
		}
	})
</script>

注：后两种本质上也是第一种方式

数组语法
我们可以把一个数组传给 v-bind:class，以应用一个 class 列表

示例1：单纯数组

<div id="app">
			<p :class="[is_red,is_through]" class="class1">绑定样式</p>
</div>

<script>
	var vm = new Vue({
		el: "#app",
		data: {
			is_red: 'isRed', //类名要加引号
			is_through: 'isThrough'
		}
	})
</script>

注：数组中的值不加引号，data中值属性对应的类名要加引号

示例2：数组与三元运算符结合判断选择需要的class

<div id="app">
			<p :class="[pClass>0.5?{'isRed':true}:{'isThrough':true}]">绑定样式</p>
</div>

<script>
	var vm = new Vue({
		el: "#app",
		data: {
			pClass: Math.random()
		}
	})
</script>

示例3：数组对象结合动态判断

<div id="app">
	<p :class="[{'isRed':is_red},is_through]">绑定样式</p>
</div>

<script>
	var vm = new Vue({
		el: "#app",
		data: {
			is_red: true,
			is_through: 'isThrough'
		}
	})
</script>

二、 HTML Style

对象语法
v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：

示例1：

<div id="app">
<p :style="{'color':activeColor,'fontSize':fontSize+'px'}">绑定style样式</p>
</div>

<script>
	var vm = new Vue({
		el: "#app",
		data: {
			activeColor: 'red',
			fontSize: 20
		}
	})
</script>

示例2：

<div id="app">
	<p :style="pStyle">绑定style样式</p>
</div>

<script>
	var vm = new Vue({
		el: "#app",
		data: {
			pStyle: {
				color: 'red',
				fontSize: '25px',
				textDecoration: 'line-through'
			}
		}
	})

同样的，对象语法常常结合返回对象的计算属性使用。参照class

注：对于样式名时js中对应的样式名不是css中对应的样式名，属性值如果是字符串时要加引号

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

<div id="app">
  <div v-bind:style="[baseStyles, overridingStyles]">菜鸟教程</div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    baseStyles: {
      color: 'green',
      fontSize: '30px'
    },
	overridingStyles: {
      'font-weight': 'bold'
    }
  }
})
</script>