1.vue中的样式绑定class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue样式绑定</title>
<script src="./vue.js"> </script>
<style>
.activated {
color: red;
}
</style>
</head>
<body>
<div id="app">
<!--activated是否显示-->
<div @click="handleDivClick"
:class="{activated: isActivated}"
> Hello world</div>
</div>
<script>
var app = new Vue({
el: '#app',
data:{
isActivated:false
},
methods:{
handleDivClick:function () {
this.isActivated = !this.isActivated;
}
}
})
</script>
</body>
</html>
2.数组class改变样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue样式绑定</title>
<script src="./vue.js"> </script>
<style>
.activated {
color: red;
}
</style>
</head>
<body>
<div id="app">
<!--activated是否显示-->
<!-- 数组里面内容代表一个变量 -->
<div @click="handleDivClick"
:class="[activated,activatedOne]"
> Hello world</div>
</div>
<script>
var app = new Vue({
el: '#app',
data:{
activated:"" , //变量
activatedOne:"activatedOne"
},
methods:{
handleDivClick:function () {
// if (this.activated === "activated") {
// this.activated === "";
// } else {
// this.activated === "activated";
// }
this.activated = this.activated === "activated" ? "" : "activated"
}
}
})
</script>
</body>
</html>
3.style改变样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>样式绑定</title>
<!--引入/vue.js-->
<script src="./vue.js"> </script>
</head>
<body>
<div id="app">
// 样式也可以通过数组实现
// <div :style="[styleObj,fontSize:'20px']"
@click="handleDivClick">hello World </div>
<div :style="styleObj"
@click="handleDivClick">hello World </div>
</div>
<script>
var app = new Vue({
el:'#app',
data:{//定义一组数据
styleObj :{
color:"black"
}
},
methods:{
handleDivClick:function(){
this.styleObj.color = this.styleObj.color === "black" ? " red" : "black";
}
}
})
</script>
</body>
</html>
网友评论