目录
一 点睛
1 通过给html元素的 class 属性绑定 vue 中的属性值，得到样式的动态绑定。
2 通过 computed 返回一个对象，对象里放着多个键值对。
3 可以通过双向绑定改变样式。
4 多个样式的组合通过数组实现。
5 在内嵌的css样式中指定 style 属性的值
6 使用 computed 设置样式
7 设置 style 属性的多个样式的组合（数组）
二 vue动态改变样式
1 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue动态改变样式</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
.mydiv{
width: 200px;
height: 220px;
background-color: black;
}
.red{
background-color: red;
}
.yellow{
background-color: yellow;
}
.blue{
background-color: blue;
}
</style>
</head>
<body>
<div id="app">
<!-- 通过给html元素的 class 属性绑定 vue 中的属性值，得到样式的动态绑定，在这里如果 temp=true，class就生效 -->
<div class="mydiv" v-bind:class="{red:temp}"></div>
<div class="mydiv"></div>
<div class="mydiv"></div>
<button type="button" @click="temp=!temp">点我</button>
</div>
<script type="text/javascript">
// Vue的实例
new Vue({
el: "#app", // 接管哪一个元素，和该元素绑定
data: { // 数据
temp: false,
},
})
</script>
</body>2 效果
三 通过 computed 改变样式
1 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue的计算属性动态改变样式</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
.mydiv {
width: 200px;
height: 200px;
background-color: black;
}
.red {
background-color: red;
}
.yellow {
background-color: yellow;
}
最低0.47元/天 解锁文章
扫一扫
1581
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
