通过数据改变样式
点击文字切换颜色
1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./vue.js"></script>
<title>Vue中的样式绑定</title>
</head>
<style>
.activated{
color: blueviolet;
}
</style>
<body>
<!-- 这个元素有一个class样式，叫做 activated，是否使用activated取决于isActivated-->
<div id="app"
@click="handleDivClick"
:class="{activated:isActivated}"
>颜色</div>
</body>
<script>
var vm=new Vue({
el:"#app",
data:{
isActivated:false
},
methods:{
handleDivClick:function(){
this.isActivated=!this.isActivated
}
}
})
</script>
</html>
点击后=>
2.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./vue.js"></script>
<title>Vue中的样式绑定</title>
</head>
<style>
.activated{
color: red;
}
</style>
<body>
<!-- 这个元素有一个class样式，class可以和数组进行绑定，class的样式取决于className的内容，className可以在vue实例中进行赋值或改变-->
<div id="app"
@click="handleDivClick"
:class="[className]"
>颜色</div>
</body>
<script>
var vm=new Vue({
el:"#app",
data:{
isActivated:false,
className:""
},
methods:{
handleDivClick:function(){
this.className=this.className==="activated"?"":"activated";
}
}
})
</script>
</html>
数组中可以有多个值。
点击后=>
3.
也可以对style进行绑定，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./vue.js"></script>
<title>Vue中的样式绑定</title>
</head>
<body>
<div id="app"
@click="handleDivClick"
:style="styleObj"
>颜色</div>
</body>
<script>
var vm=new Vue({
el:"#app",
data:{
styleObj:{
color:'black'
}
},
methods:{
handleDivClick:function(){
this.styleObj.color=this.styleObj.color==='black'?'blue':'black';
}
}
})
</script>
</html>
点击后=》
4.style也可以使用数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./vue.js"></script>
<title>Vue中的样式绑定</title>
</head>
<body>
<div id="app"
@click="handleDivClick"
:style="[styleObj,{fontSize:'20px'}]"
>颜色</div>
</body>
<script>
var vm=new Vue({
el:"#app",
data:{
styleObj:{
color:'black'
}
},
methods:{
handleDivClick:function(){
this.styleObj.color=this.styleObj.color==='black'?'blue':'black';
}
}
})
</script>
</html>
样式绑定有两种方法，1.class ; 2.style。他们都可以通过数据来实现切换，同样也都可以通过数组进行绑定。