<!--
切换效果的实现：
做切换效果技术====>样式绑定
组件或者模块得切换====>动态组件 v-if/v-show
路由切换====>router
-->
(1) 对style 进行绑定
举例：点击按钮显示和隐藏元素(开关思想)
<div id="app">
<button v-on:click="btnclicked">show</button>
<div :style="{display:n}">{{msg}}</div>
</div>
<script>
new Vue({
el:"#app",
data:{
msg:"hello",
flag:true,
n:"block"
},
methods:{
btnclicked(){
this.flag=!this.flag
if(this.flag){
this.n="block"
}else{
this.n="none"
}
}
}
})
</script>
也可以添加一个对象进行修改
<div :style="obj">{{msg}}</div>
obj:{
color:"red",
fontSize:"30px"
}
也可以直接在style里面使用多个变量对象，或者直接写上对象
<div :style="[box1,box2]">{{msg}}</div>
box1:{
fontSize:"10px",
width:"40px",
},
box2:{
height:"40px",
background:"red"
}
(2)对class 属性进行绑定
如果要修改父盒子中所有得元素就可以使用class绑定
举例：点击按钮切换盒子得背景颜色
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.box{
width: 70px;
height: 150px;
text-align: center;
}
.day{
background-color: rgb(238, 233, 227);
}
.night{
background-color: rgb(5, 5, 5);
color: aliceblue;
}
</style>
</head>
<body>
<div id="app">
<button @click="chang">{{msg}}</button>
<div :class="['box',model]">
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>
</div>
</div>
<script>
new Vue({
el:"#app",
data:{
msg:"白天",
flag:true,
model:"day"
},
methods:{
chang(){
this.flag=!this.flag
if(this.flag){
this.model="day";
this.msg="白天"
}else{
this.model="night";
this.msg="晚上"
}
}
}
})
</script>
扫一扫
838
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
