class与style绑定

最新推荐文章于 2022-06-19 22:57:51 发布

你真好看l

最新推荐文章于 2022-06-19 22:57:51 发布

阅读量157

点赞数

分类专栏： vue的学习

本文链接：https://blog.csdn.net/qq_40052011/article/details/102595204

版权

vue的学习专栏收录该内容

22 篇文章 0 订阅

订阅专栏

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

1.理解在应用界面中，某个（些）元素的样式是变化的 class/style绑定就是专门用来实现动态样式效果的技术
2.class绑定：
语法 v-bind:class=‘xxx’
xxx是字符串
xxx是对象
xxx是数组
3.style绑定 :style="{color:activeColor,fontSize:fontSize+‘px’}" 其中activeColor/fontSize是data属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.aClass{
				color:red;
			}
			.bClass{
				color: #0000FF;
			}
			.cClass{
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		<div id="demo">
			<h2>1.class的绑定</h2>
			<p class="cClass" :class="a">xxx是字符串</p>
			<p :class="{aClass: isA, bClass: isB}">xxx是对象</p>
			<p :class="['aClass', 'bClass']">xxx是对象</p>
			
			
			
			
			<h2>2.style绑定</h2>
			<p 	:style="{color:activeColor,fontSize:fontSize+'px'}">我在做style绑定</p>
			
			
			<button type="button" @click="update">更新</button>
			
		</div>
		<script type="text/javascript">
			new Vue({
				el: '#demo',
				data:{
					a: 'aClass',
					isA: true,
					isB: false,
					activeColor: 'red',
					fontSize: 20
				},
				methods:{
					update(){
						this.a = 'bClass';	
						this.isA = false;
						this.isB = true;
						this.activeColor = 'green';
						this.fontSize = '40'
					}
				}
			})
		</script>
		
	</body>
</html>

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

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

3多重值：从 2.3.0 起你可以为 style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：

这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。

你真好看l

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
class与style绑定

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

扫一扫