vue 实现active切换效果和 动态组件
程序员文章站
2022-03-28 13:49:43
...
动态组件
<template v-slot:text1>
<div @click="currentComponent='part2'">一手房</div>
</template>
<template v-slot:text2>
<div @click="currentComponent='part3'">二手房</div>
</template>
</part>
<component :is="currentComponent"></component>
//默认选择part2组件
data(){
return{
currentComponent:"part2"
}
},
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="lib/vue.js"></script>
<style>
.red{
color: red;
}
</style>
</head>
<body>
<div id="app">
<!-- <com></com>
<com1></com1> -->
<!-- keepalive会将我们之前的组件缓存起来 -->
<keep-alive>
<component :is="currentComponent"></component>
</keep-alive>
<button @click="changeComponent">
切换组件
</button>
</div>
<script>
var vm = new Vue({
el:"#app",
data () {
return {
com:"com",
com1:"com1",
com2:"com2",
currentComponent:"com"
}
},
methods:{
changeComponent(){
if(this.currentComponent == "com"){
this.currentComponent = "com1"
}else if(this.currentComponent == "com1"){
this.currentComponent = "com2"
}else if(this.currentComponent == "com2"){
this.currentComponent = "com"
}
}
},
components: {
com:{
template:"<h2>组件一里面的内容</h2>"
},
com1:{
template:"<h2>组件二里面的内容</h2>"
},
com2:{
data(){
return {
nowIndex:100
}
},
template:`
<ul>
<li @click="nowIndex = 0" :class="{red:nowIndex == 0}">张三</li>
<li @click="nowIndex = 1" :class="{red:nowIndex == 1}">李四</li>
</ul>
`
}
}
})
</script>
</body>
</html>active切换效果
动态绑定class
<ul class="money-wrap flex-c flex-a w30">
<li :class="{mac:shows==1}" @click="show1">
一个月
<span>￥15</span>
</li>
<li :class="{mac:shows==2}" @click="show2">
半年
<span>￥69</span>
</li>
<li :class="{mac:shows==3}" @click="show3">
一年
<span>￥99</span>
</li>
</ul>
class点击事件
show1() {
this.shows = 1;
console.log(this.shows);
},
show2: function() {
this.shows = 2;
console.log(this.shows);
},
show3() {
this.shows = 3;
console.log(this.shows);
}
//样式
<swiper-slide v-for="(item,index) in list" :key="item.id" @click.native="show(index)">
<img :src="item.src" :class="{mac:shows==index}" />
<p>{{item.t1}}</p>
</swiper-slide>
//js
show(i) {
this.shows = i;
}