小程序 - 动态绑定 class 样式 | vue - 动态绑定 class样式

以下是小程序 动态绑定 class 样式

效果图

在这里插入图片描述

  • 先写一个改变之后的样式
.active {
  border-bottom: 2px solid #f00;
  color: red;
}
  • 在xxx.js 里边写下要点击的下边
data: {
  currentIndex:0,
}
  • 在 view 里边写 class 样式
	<view 
      wx:for="{{label}}" 
      wx:key="{{index}}" 
      
      class="{{index==currentIndex? 'active':''}}" 
      
      data-index="{{index}}"
      catchtap="changeFn"
      >
			<view>{{item}}</view>
	</view>
  • 点击 changeFn 实现点击跳转
// 标签切换
  changeFn(e){
    console.log(e);
    let {index} = e.currentTarget.dataset;
    this.setData({
      currentIndex:index
    })
  },


 onLoad: function (options) {
    console.log(options.index);
    this.setData({
      currentIndex:options.index
    })
    console.log(this.data);
    
  },

以上就实现点击 切换 样式

以下是vue - 动态绑定class

  1. template部分:
	 <div>
        主题分类:
        <div v-for="(item,index) in subject" :key="index">
          <div :class="currentIndex===index?'current':''" @click="right(index)">{{item.name}}</div>   // 这一步是动态绑定class 
        </div>
      </div>

      <div>
        主题细节:
        <div v-for="(item,index) in detail" :key="index">
          <p class="subjectItem">{{item.name}}</p>
        </div>
      </div>
  1. script部分:
data() {
    return {
      subject: [
        {
          name: "全部",
          tag: "all",
        },
        {
          name: "HTML语言",
          tag: "html",
        },
        {
          name: "CSS技术",
          tag: "css",
        },
        {
          name: "Javascript",
          tag: "js",
        },
        {
          name: "前端框架",
          tag: "front",
        },
        {
          name: "后台框架",
          tag: "back",
        },
        {
          name: "数据库",
          tag: "database",
        },
      ],
      detail: [
        {
          name: "HTML",
          tag: "html",
        },
        {
          name: "HTML5",
          tag: "html",
        },
        {
          name: "CSS",
          tag: "css",
        },
        {
          name: "CSS3",
          tag: "css",
        },
        {
          name: "Js语法基础",
          tag: "js",
        },
        {
          name: "DOM文档对象模型",
          tag: "js",
        },
        {
          name: "面向对象的程序设计",
          tag: "js",
        },
        {
          name: "Vue.js",
          tag: "front",
        },
        {
          name: "Bootstrap",
          tag: "front",
        },
        {
          name: "Node.js",
          tag: "front",
        },
        {
          name: "Express",
          tag: "front",
        },
        {
          name: "PHP",
          tag: "back",
        },
        {
          name: "JSP",
          tag: "back",
        },
        {
          name: "Java",
          tag: "back",
        },
        {
          name: "MySQL",
          tag: "database",
        },
        {
          name: "mongDB",
          tag: "database",
        },
      ],
      currentIndex: 0,
    };
  },
  methods: {
    right(index) {
      console.log(index);
      this.currentIndex = index
    },
  },

在这里插入图片描述

<div class="van-tab">
	<div v-for="(item,index) in tabList" :key="index">
		<div :class="currentIndex===index?'active':''" @click="onTab(index)">{{item.name}}</div>
		<span :class="currentIndex===index?'line':''"></span>
	</div>
</div>

<script>
	export default {
		data() {
			return {
				tabList: [{
						name: "正在抢购",
					},
					{
						name: "活动预告",
					},
				],
				currentIndex: 0,
			}
		},
		onLoad() {

		},
		methods: {
			onTab: function(e) {
				this.currentIndex = e
			},
		}
	}
</script>
<style scoped>
	.van-tab {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 27rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #252729;
		padding: 47rpx 207rpx 0;
	}

	.van-tab>div {
		height: 45rpx;
	}

	.van-tab .active {
		font-weight: 600;
		color: #09BAA7;
	}

	.van-tab .line {
		margin: 7rpx auto 0;
		display: inherit;
		width: 24rpx;
		height: 5rpx;
		background: #09BAA7;
		border-radius: 4rpx;
	}
</style>
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值