vue样式绑定切换

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Vue中样式绑定</title></head><body&

依米_

4238人浏览 · 2018-05-15 13:45:06

依米_ · 2018-05-15 13:45:06 发布

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue中样式绑定</title>
</head>
<body>
<div id="app">
<div @click="handleDivClick" :class="{activated: isActivated}">HElloe world</div>

</div>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
isActivated:false//第二步在data里声明isActivated这个变量
},
methods:{
handleDivClick:function () {
this.isActivated = true//刷新页面class里没有activated这个class名，当点击后出现
}
}
})
</script>
</body>

</html>

///如何点击字体颜色变红实现之后再点击进行颜色还原呢，只需this.isActivated = !this.isActivated 把变量取反

:class="{activated: isActivated} 这种语法称为class的对象绑定

样式添加
通过：class="[activated,activatedOne ]",数组绑定

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue中样式绑定1</title>
<style>
.activated{
color:red;
}
</style>
</head>
<body>
<div id="app">
<div @click="handleDivClick" :class="[activated,activatedOne]">HElloe world</div>


</div>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
activated:"",//第二步在data里声明activated变量，刚开始为空
activatedOne:"activatedOne"
},
methods:{
handleDivClick:function () {
// if(this.activated ==="activated")
// this.activated = ""
// else{
// this.activated= "activated"
// }
this.activated = this.activeted === "activated"? "" :"activated"
//刷新页面class里没有activated这个class名，当点击后出现
}
}
})
///如何点击字体颜色变红实现之后再点击进行颜色还原呢，只需if判断

</script>
</body>

</html>

冒号后是指令，等于号后是表达式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue中样式绑定内联</title>

</head>
<body>


<div id="app">
<div :style="styleObj" @click="handledivClick">HElloe world</div>

</div>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
styleObj:{
color:"black"
}
},
methods:{
handledivClick:function () {
this.styleObj.color=this.styleObj.color ==="black"?"red":"black"
}
}
})
///如何点击字体颜色变红实现之后再点击进行颜色还原呢，只需if判断

</script>
</body>

</html>

;style里也可以写数组 font-size错误，单引号引用

<div :style="[styleObj,{fontSize:'20px'}]" @click="handledivClick">HElloe world</div>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^