vue中样式绑定

最新推荐文章于 2023-06-10 23:38:12 发布

Amy_Chen_White

最新推荐文章于 2023-06-10 23:38:12 发布

阅读量100

点赞数

本文链接：https://blog.csdn.net/weixin_43758938/article/details/103047719

版权

v-bind和v-model的区别：

	v-bind 只实现了数据的单项绑定  从M到V  无法实现数据的双向绑定
	 v-model 实现了数据的双向绑定, 必须和表单元素结合起来使用 
		text   email  select  checkbox....

使用calss属性样式绑定

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>使用class属性样式绑定</title>
	<script src="../libs/vue-2.4.0.js"></script>
	<style type="text/css">
		.red {
			color: red;
		}

		.thin {
			font-weight: 200;
		}

		.i {
			font-style: italic;
		}

		.active {
			letter-spacing: 0.5em;
		}
	</style>
</head>
<body>
	<div id="app">
		<!-- <h1 class="red thin i active">今天天气真好</h1> -->
		<!-- 第一种方式  直接传递一个数组  注意：class 用v-bind 修饰 -->
		<!-- <h1 :class="['thin','red']">今天天气真好</h1> -->

		<!-- 第二种 在数组加上三元运算符 exp? 1: 2 -->
		<!-- <h1 :class="['thin','red', flag?'active' : '']">今天天气真好</h1> -->

		<!-- 第三种  将class属性值抽取到data中  方便阅读 -->
		<!-- <h1 :class="arr">今天天气真好</h1> -->

		<!-- 第四种  class等于一个对象 -->
		<h1 :class="obj">今天天气真好</h1>


	</div>
	
	<script>
		var vm = new Vue({
			el: "#app",
			data: {
				flag: true,
				arr: ['thin','red', this.flag?'active' : ''],
				obj: {
					red: true,
					i: false,
					active: true,
					thin: true
				}
			},
			methods: {}
		})
	</script>

</body>
</html>

Amy_Chen_White

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中样式绑定

v-bind和v-model的区别： v-bind 只实现了数据的单项绑定从M到V 无法实现数据的双向绑定 v-model 实现了数据的双向绑定, 必须和表单元素结合起来使用 text email select checkbox.... 使用calss属性样式绑定<!DOCTYPE html><html lang="en"><hea...
复制链接

扫一扫