vue样式绑定 切换

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

<!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>
<!--//class的名字叫activated 这个class显示与否看isActivated这个变量-->
</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>
<!--:class里是一个数组-->
<!--//class的名字叫activated,显示的是activated变量里的内容-->
</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样式绑定 切换 的全部内容， 来源链接： utcz.com/z/375240.html

回到顶部