小程序 - 动态绑定 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>

2. 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>