我们都知道,Vue是一个面向数据的语言,其实是很少直接操作DOM元素的内容的,所以Vue是怎么改变DOM标签的样式呢,以下有三种方式:
1.对class对象的绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<style>
.changeColor{
color:red;
}
</style>
</head>
<body>
<div id="app">
<div @click="divclick" :class="{changeColor:isChangeColor}"> 你好,Vue</div>
</div>
<script type="text/javascript">
var vm = new Vue ({
el:"#app",
data:{
isChangeColor:false
},
//1.class的对象绑定
methods:{
divclick:function(){
this.isChangeColor =! this.isChangeColor;
}
}
}) //Vue编程是面向数据的编程,不会直接操作DOM元素
</script>
</body>
</html>
2.class构建数组语法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<style>
.changeColor{
color:red;
}
</style>
</head>
<body>
<div id="app">
<div @click="divclick" :class='[changeColor]'> 你好,Vue</div>
</div>
<script type="text/javascript">
var vm = new Vue ({
el:"#app",
data:{
changeColor:""
},
methods:{
divclick:function(){
this.changeColor=this.changeColor==="changeColor"
?"":"changeColor"
}
}
}) //Vue编程是面向数据的编程,不会直接操作DOM元素
</script>
</body>
</html>
3.style绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div :style="[styleObj]" @click="divclick"> 你好,Vue</div>
</div>
<script type="text/javascript">
var vm = new Vue ({
el:"#app",
data:{
styleObj:{
color:"black"
}
},
methods:{
divclick:function(){
this.styleObj.color=this.styleObj.color==="black"
?"red":"black";
}
}
}) //Vue编程是面向数据的编程,不会直接操作DOM元素
</script>
</body>
</html>
不难看出,不管是class样式还是style样式,都有两种方式,直接绑定和数组绑定。