vue移动端项目vant组件库之tag详解

目录

• vant组件库之tag
• tag标签选中(类型选择,分类选择)

vant组件库之tag

直接上代码

效果

tag标签选中(类型选择,分类选择)

使用三元表达式为类选择器给值。当变量active被点击赋值时则，引用active样式。无点击使用Classification样式。

往往就是简单的操作，就把自己玩懵逼了！写半天报找不到Classification，还在想诶？Classification不是变量啊。一脸懵逼。最后发现'active':'Classification'。没加''。（日常自己坑自己）

效果图：

	        
         {{item.type}}

js：

data() {
	return {
		data: [{
			    type: '66P'
			}, {
			    type: '760P'
			}, {
			    type: '(含16G系统优盘)660P'
			}, {
			    type: '(含16G系统优化盘)760P'
			}],
			active:''
			}
},
 
methods: {
    oncheck(name){
		 console.log(name)
		 this.active=name
	}
}

css：

.active{
		float: left;
		margin-left: 10px;
		padding: 10px;
		background: #efc531;
		margin-bottom: 10px;
		border-radius: 4px;
		font-size: 14px;
	}
.Classification {
		float: left;
		margin-left: 10px;
		padding: 10px;
		background: #f7f7f7;
		margin-bottom: 10px;
		border-radius: 4px;
		font-size: 14px;
	}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。