Uniapp 标签 不换行

重点是display: inline-block;

三元表达式： :class="activeindex!=tindex?'search-btn':'actived'"

第一步 数据设置:

typelist: [{
						name: 'JAVA',
						value: 0
					},
					{
						name: 'Android',
						value: 1
					},
					{
						name: 'PHP',
						value: 2
					},
					{
						name: 'NET',
						value: 3

					}
				],



第二步循环view
	<view v-for="(item,tindex) in typelist"  class="typeview" @click="selectType(tindex)"  
	       	:class="activeindex!=tindex?'search-btn':'actived'"  >
			<text  >{{item.name}}</text>
            
		</view>


		<text @click="selectType(tindex)" v-for="(item,tindex) in typelist"
			:class="activeindex!=tindex?'search-btn':'actived'">{{item.name}}
		</text>


第三步：

选中与平常状态的样式
.typeview {
		display: inline-block;
	}

	.actived {

		color: #fff;
		display: inline-block;
		padding: 5px 30rpx;
		background: #437FEE;
		border-radius: 40px;
		font-size: 14px;
		letter-spacing: 1px;
		margin-left: 20rpx;
		margin-top: 20rpx;
	}

	.search-btn {
		display: inline-block;
		padding: 5px 30rpx;
		color: #6C6C77;
		background: #FFFFFF;
		border-radius: 40px;
		font-size: 14px;
		letter-spacing: 1px;
		margin-left: 20rpx;
		margin-top: 20rpx;
	}