CSS组件的样式绑定 + tab标签切换内容

朱雀 2023-05-29 02:36 190阅读 0赞

## CSS组件的样式绑定 + tab标签切换内容 ##

**效果：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pfMDkyNg_size_16_color_FFFFFF_t_70]

**实现方式：**

<view  v-for="(tag1,tag1Num) in tag1List" :key="tag1Num">
    	<text class="tag1" :class="{tagActive : tag1Num == num }" @click="tag1(tag1Num)">{
       {tag1}}</text>
    </view>

<view class="" v-show="num == 1">
    	页面内容……
    <view>

<script>
    	export default {
    		data() {
    			return {
    				// 分类标签
    				num : 0,
    				tag1List : ["1","2","3","4"]
    			}
    		},
    		methods: {
    			tag1(tag1Num){
    				this.num = tag1Num
    			},
    			// 标签的切换
    			changeTab(lab){
    				this.navIdx = lab;
    			}
    	}
    </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pfMDkyNg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191101160421374.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pfMDkyNg==,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，190人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS组件的样式绑定 + tab标签切换内容

CSS组件的样式绑定 + tab标签切换内容效果： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_1

朱雀/ 2023年05月29日 02:36/ 0 赞/ 191 阅读

相关 VUE-Element组件（六）Tabs 标签

一、标签自定义： 1、在标签后面增加按钮 <el-tabs v-model="editableTabsValue" type="card" @tab-r

矫情吗；*/ 2022年12月10日 02:25/ 0 赞/ 319 阅读

相关 Input标签禁用与Css动态样式绑定

input标签存在一个disabled属性，可以用来禁用此标签，通常还可以对这个属性进行禁用后的样式修改 <input [disabled]="boolean">

古城微笑少年丶/ 2022年12月05日 00:49/ 0 赞/ 139 阅读

相关 Vue 动态绑定CSS样式

动态绑定CSS样式绑定了changeColor样式,changeC是判断条件，根据条件changeC控制css加与不加 <div v-bind:class="

悠悠/ 2022年11月19日 04:24/ 0 赞/ 274 阅读

相关纯CSS实现Tab切换以及 CSS+JS实现Tab切换

纯CSS实现Tab切换效果图思路代码 CSSJS实现Tab切换效果图

怼烎@/ 2022年09月24日 11:20/ 0 赞/ 276 阅读

相关 tab 切换样式

![20210722193233170.png][] <ul> <li v-for="(item, index) in titleList0" :

秒速五厘米/ 2022年08月31日 04:42/ 0 赞/ 222 阅读

相关 vue样式绑定切换

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

我会带着你远行/ 2022年05月25日 13:07/ 0 赞/ 259 阅读

相关 Vue 框架-05-动态绑定 css 样式

Vue 框架-05-动态绑定 css 样式今天的小实例是关于 Vue 框架动态绑定 css 样式，这也是非常常用的一个部分首先说一下动态绑定，相对的大家都知道静态

雨点打透心脏的1/2处/ 2022年04月17日 06:07/ 0 赞/ 471 阅读

相关 jquery之tab样式切换

> 简单的一个小dom。 <！--heml--> <ul id="navlist"> <li>全部</li>

骑猪看日落/ 2022年01月31日 04:59/ 0 赞/ 273 阅读

相关 vue动态绑定class,tab切换非常好用

<div @click="tab('left')" v-bind:class="{ 'decoration-line':showLeft}" class="col-xs

谁践踏了优雅/ 2022年01月15日 00:25/ 0 赞/ 384 阅读