Vue的样式绑定
程序员文章站
2022-07-04 19:33:01
...
<!DOCTYPE html>
<html>
<head>
<title>Vue的样式绑定</title>
<meta charset="utf-8">
<script type="text/javascript" src="js/vue.js"></script>
<style type="text/css">
.action{
color: red;
}
.action-one{
color: yellow;
}
</style>
</head>
<body>
<div id="app">
<div
:style="[styleObj,{fontSize:'6px'}]" @click="handDivClick"
>
hello word!!!
</div>
<!-- <div
:style="styleObj" @click="handDivClick"
>
hello word!!!
</div> -->
<!-- <div @click="handDivClick"
:class="[action,actionOne]"
>
hello word!!!
</div> -->
</div>
</body>
<script type="text/javascript">
//vue点击颜色变化一般就是js，那么我们就是做一个js绑定对象；{}
//:class="{action:isaction}" 属性action,
//1.一种方法就是class对象绑定；
//2.第二种方法就是class绑定一个数组；里面就是变量值；
//3.第三种方法就是通过style绑定数组的形式；和变量的形式；
var app=new Vue({
el:"#app",
data:{
isaction:false,
action:"",
actionOne:"action-one",
styleObj:{
color:"red"
}
},
methods:{
handDivClick:function(){
/*this.isaction=!this.isaction;
console.log(123);*/
/*this.action="action";*/
//这么判断呢？
/*if (this.action==="") {
this.action="action";
} else {
this.action="";
}*/
//用一个三元表达；
this.styleObj.color=this.styleObj.color==="red"?"yellow":"red";
}
}
})
</script>
</html>