vue3 <div class="icon iconhms icon-drag" :class="canDrag ? 'aaa' : 'bbb'" ></div> canDrag是计算属性,可以通过这种方式动态增加class吗
时间: 2023-08-13 09:25:05 浏览: 45
可以的,你可以使用类似于以下代码的方式来动态增加 class:
```html
<template>
<div class="icon iconhms icon-drag" :class="canDrag ? 'aaa' : 'bbb'"></div>
</template>
```
其中,`:class` 绑定了一个三元表达式,当 `canDrag` 为 true 时,会添加 `aaa` 类名,否则添加 `bbb` 类名。这里使用的是 Vue3 中新增的 `:class` 语法来动态绑定 class。通过这种方式,可以让组件的 class 更加灵活地根据条件进行动态设置。
相关问题
<div class="left"> <div class="fulltrend" :class="{ full: flag1 }"> <trend class="trend" ref="trend2"> </trend> <div class="iconfont icon-expand-alt icon" @click="fullscreen1" v-if="!flag1" ></div> <div class="iconfont icon-compress-alt icon" @click="smallscreen1" v-else ></div> </div> <div class="fullseller" :class="{ full: flag }"> <seller class="seller" ref="seller2"></seller> <div class="iconfont icon-expand-alt icon" @click="fullscreen" v-if="!flag" ></div> <div class="iconfont icon-compress-alt icon" @click="smallscreen" v-else ></div> </div> </div> <div class="center"> <div class="fullmap" :class="{ full: flag5 }"> <Map class="map" ref="map2"></Map> <div class="iconfont icon-expand-alt icon" @click="fullscreen5" v-if="!flag5" ></div> <div class="iconfont icon-compress-alt icon" @click="smallscreen5" v-else ></div> </div> <div class="fullrank" :class="{ full: flag2 }"> <rank class="rank" ref="rank2"></rank> <div class="iconfont icon-expand-alt icon" @click="fullscreen2" v-if="!flag2" ></div> <div class="iconfont icon-compress-alt icon" @click="smallscreen2" v-else ></div> </div> </div>优化的代码
可以将全屏和退出全屏的按钮封装成一个组件,减少代码冗余。另外,可以增加一个父组件,用来管理子组件的布局和交互。优化后的代码如下:
```
<template>
<div class="container">
<fullscreen-button :is-fullscreen="isTrendFullscreen" @toggle-fullscreen="toggleTrendFullscreen" />
<fullscreen-button :is-fullscreen="isSellerFullscreen" @toggle-fullscreen="toggleSellerFullscreen" />
<fullscreen-button :is-fullscreen="isMapFullscreen" @toggle-fullscreen="toggleMapFullscreen" />
<fullscreen-button :is-fullscreen="isRankFullscreen" @toggle-fullscreen="toggleRankFullscreen" />
<div class="left">
<div class="fulltrend" :class="{ full: isTrendFullscreen }">
<trend class="trend" ref="trend2" />
</div>
<div class="fullseller" :class="{ full: isSellerFullscreen }">
<seller class="seller" ref="seller2" />
</div>
</div>
<div class="center">
<div class="fullmap" :class="{ full: isMapFullscreen }">
<Map class="map" ref="map2" />
</div>
<div class="fullrank" :class="{ full: isRankFullscreen }">
<rank class="rank" ref="rank2" />
</div>
</div>
</div>
</template>
<script>
import FullscreenButton from "@/components/FullscreenButton.vue";
export default {
components: {
FullscreenButton,
Trend,
Seller,
Map,
Rank,
},
data() {
return {
isTrendFullscreen: false,
isSellerFullscreen: false,
isMapFullscreen: false,
isRankFullscreen: false,
};
},
methods: {
toggleTrendFullscreen() {
this.isTrendFullscreen = !this.isTrendFullscreen;
},
toggleSellerFullscreen() {
this.isSellerFullscreen = !this.isSellerFullscreen;
},
toggleMapFullscreen() {
this.isMapFullscreen = !this.isMapFullscreen;
},
toggleRankFullscreen() {
this.isRankFullscreen = !this.isRankFullscreen;
},
},
};
</script>
```
这样,就可以通过父组件来控制全屏和退出全屏的状态,而且也方便后续的维护和扩展。
<div id="app"> <!-- 顶部快捷导航start --> <div class="shortcut"> <div class="w"> <div class="fl"> <ul> <li>购物商城欢迎您! </li> <li> <a href="#">请登录</a> <a href="#" class="style-red">免费注册</a> </li> </ul> </div> <div class="fr"> <ul> <li><a href="#">我的订单</a></li> <li class="spacer"></li> <li> <a href="#">我的购物</a> <i class="icomoon"></i> </li> <li class="spacer"></li> <li><a href="#">商城会员</a></li> <li class="spacer"></li> <li><a href="#">企业采购</a></li> <li class="spacer"></li> <li><a href="#">关注商城</a> <i class="icomoon"></i></li> <li class="spacer"></li> <li><a href="#">客户服务</a> <i class="icomoon"></i></li> <li class="spacer"></li> <li><a href="#">网站导航</a> <i class="icomoon"></i></li> </ul> </div> </div> </div> <!-- 顶部快捷导航end <img src="img/logo.png" alt="">--> <div class="car-header"> <div class="w"> <div class="car-logo"> <b>购物车</b> </div> </div> </div> </div>帮我改写成组件化
可以将这段代码分成两个组件:顶部快捷导航和购物车头部。
1. 顶部快捷导航组件:
```html
<template>
<div class="shortcut">
<div class="w">
<div class="fl">
<ul>
<li>购物商城欢迎您!</li>
<li>
<a href="#">请登录</a>
<a href="#" class="style-red">免费注册</a>
</li>
</ul>
</div>
<div class="fr">
<ul>
<li><a href="#">我的订单</a></li>
<li class="spacer"></li>
<li>
<a href="#">我的购物</a>
<i class="icomoon"></i>
</li>
<li class="spacer"></li>
<li><a href="#">商城会员</a></li>
<li class="spacer"></li>
<li><a href="#">企业采购</a></li>
<li class="spacer"></li>
<li><a href="#">关注商城</a> <i class="icomoon"></i></li>
<li class="spacer"></li>
<li><a href="#">客户服务</a> <i class="icomoon"></i></li>
<li class="spacer"></li>
<li><a href="#">网站导航</a> <i class="icomoon"></i></li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Shortcut"
}
</script>
```
2. 购物车头部组件:
```html
<template>
<div class="car-header">
<div class="w">
<div class="car-logo">
<b>购物车</b>
</div>
</div>
</div>
</template>
<script>
export default {
name: "CartHeader"
}
</script>
```
然后在父组件中使用这两个子组件:
```html
<template>
<div id="app">
<Shortcut />
<CartHeader />
</div>
</template>
<script>
import Shortcut from "@/components/Shortcut.vue";
import CartHeader from "@/components/CartHeader.vue";
export default {
components: {
Shortcut,
CartHeader
}
}
</script>
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
const activeIndex=Vue.ref(0);
// console.log(activeIndex.valuea);
function toggleActive(index){
if(activeIndex.value===index){
activeIndex.value=null;
}else{
activeIndex.value=index;
console.log(activeIndex);
console.log(activeIndex.value);
}
const lis =document.querySelectorAll(".clearfix li")
for(let i=0;i{{option.category_title}}
和
{{option2.subtitle}}
{{option2.title}}
{{option2.summary}}
{{option2.subtitle}}
{{option2.title}}
{{option2.summary}}
实现tab切换
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
<van-nav-bar> <template v-slot:right> 去注册 > </template> </van-nav-bar> 飞腾兔 国内领先的人力资源服务器 <van-field v-model="form.phoneNumber" clearable placeholder="11位手机号" class="custom-field" > <template #label> +86 <van-divider vertical /> </template> </van-field> <van-field v-model="form.idNumber" clearable placeholder="后六位" class="custom-field" > <template #label> 身份证 <van-divider vertical /> </template> </van-field> <van-button type="primary" class="btn" @click="getLogin"> 登 录 </van-button> <van-button @click="getRegister">身份证登录</van-button> 登录代表您已同意用户协议和隐私协议 给用户协议,加一个click事件,点击出现一个dialog,里面有协议内容
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)