【VUE】数据库动态渲染标签，并且动态绑定事件与激活图标

<template>
    <view >
        <!-- 输入框 -->
        <view class="search">
            <u-search placeholder="请输入关键词" input-align="center" v-model="keyword" bg-color="#FFFFFF" border-color="#007AFF" height="70"></u-search>
        </view>
        
        <!-- 分类 -->
        <view class="cu-list grid col-5 no-border" style="background-color: transparent;">
            <!-- 标签遍历 -->
            <view class="cu-item" v-for="item in tag_list" >
                <u-tag class="tag" :text="item.tag"  :type="item.type"  mode="light"  @click="tag_btn(item.id)"/>
            </view>
            
        </view>
        
        
    </view>
</template>

<script>
    export default {
        data() {
            return {
                keyword:"",
                
                tag_list:[
                    {"id":0,"type":"primary","tag":"全部"},
                    {"id":1,"type":"primary","tag":"111"},
                    {"id":2,"type":"primary","tag":"222"},
                ],
                
                
            }
        },
        methods: {
            // 点击标签 
            tag_btn(index){
                
                // 每次都会重置原来的值
                for (var i = 0; i < this.tag_list.length; i++) {
                    this.tag_list[i].type = "primary"
                }

                // 创建一个跟原数组一样的数组
                var tag_list_s = this.tag_list
                
                // 根据索引值 将对应的值修改成你想要的样式
                tag_list_s[index].type = "success"
                
                // 重新赋值给HTML面板的
                this.tag_list = tag_list_s
                // console.log(tag_list_s)
                
            },
        }
    }
</script>

<style>
    
    .tag{
        padding: 8px;
        width: 90%;
        margin-left: 5%;
    }
    
    
    
    .search{
        /* background-color: #007AFF; */
        
        margin-top: 20px;
        width: 90%;
        margin-left: 5%;
        height: 60px;
    }
</style>

效果：