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

朱雀 2023-05-29 02:36 211阅读 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 条评论，211人围观）

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

相关阅读

相关 uni-app动态绑定css样式的width

uni-app动态绑定width 需求描述做的项目需要实现一个类似table的功能，但是由于表格的内容不是固定的，如果把css的width写死，就可能导致

墨蓝/ 2023年10月10日 09:26/ 0 赞/ 22 阅读

相关 vue给标签绑定内联样式

html代码直接在行内使用v-bind写入一个对象，属性名如果有 - 字符，必须用引号括起来 <h1 :style="styleObj1">我是一个字符串</h

朱雀/ 2023年07月11日 11:20/ 0 赞/ 41 阅读

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

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

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

相关 CSS 点击绑定样式

CSS 点击绑定样式 <view style="text-align: center;display: inline;" v-for="(tag,tagNum)

冷不防/ 2023年05月29日 02:27/ 0 赞/ 33 阅读

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

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

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

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

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

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

相关 Vue 动态绑定CSS样式

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

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

相关 tab 切换样式

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

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

相关 vue样式绑定切换

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

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

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

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

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