<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue中的样式绑定</title>
<script src="vue.js"></script>
</head>
<style type="text/css">
.activated{
color: red;
}
</style>
<body>
<!-- 实现点击一下div内容的颜色变化，再次点击还原样式 -->
<!--:class 叫做class对象绑定 -->
<div id="app" @click="handleDivClick" :class="{activated: isActivated}">
hello world
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
isActivated:false
},
methods:{
handleDivClick:function(){
this.isActivated=!this.isActivated;
}
}
})
</script>
<!-- 第二种实现方式 -->
<div id="app2" @click="handleDivClick" :class="[activated]">
hello world
</div>
<script>
var vm=new Vue({
el:"#app2",
data:{
activated:""
},
methods:{
handleDivClick:function(){
/*
= 是赋值的意思，让左边的值等于右边的值
== 是判断等于的意思，返回值是一个布尔值，它只判断值是否相等，不判断类型是否一样
=== 也是判断等于的意思，返回值也是一个布尔值，但是它不仅仅判断值是否相等，还判断类型是否相等
*/
this.activated = this.activated === "activated" ? "":"activated"
}
}
})
</script>
<!-- 第三种实现方式，style内联方式 -->
<div id="app3" @click="handleDivClick" :style="styleObj"><!--:style="[styleObj,{fontSize:'20px'}]" -->
hello world
</div>
<script>
var vm=new Vue({
el:"#app3",
data:{
styleObj:{
color:"black"
}
},
methods:{
handleDivClick:function(){
this.styleObj.color=this.styleObj.color === "black" ? "red":"black";
}
}
})
</script>
</body>
</html>
9915
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
