标签：vue name .. url item repeat background uni 动态数据

index.vue内使用list组件，组件的功能主要包含1：根据不同数据显示不同图标，2：选中事件

实现1：利用:class="iconClass" 

实现2：vue基础 子传父$emit，父传子prop

代码：父组件index.vue

<template>
    <view class="content">
        <nav-bar></nav-bar>
        <view class="dg">
            <view class="content">
                <!-- 搜索框 -->
                <view>
                    <input type="text" v-model="search" class="inp">
                </view>
                <!-- <text>{{search}}</text> -->
                <!-- 列表 -->
                <f-list v-for="(item,index) in list" 
                :key="index" 
                :item="item" 
                :index="index"
                @select="select"
                ></f-list>
            </view>
        </view>
    </view>
</template>
<script>
    import navBar from '@/components/common/nav-bar.vue';
    import fList from '@/components/common/f_list.vue';

    export default {
        data() {
            return {
                title: 'Hello',
                search: '',
                list: [{
            "type": "dir",
            "name": "我的文件夹",
            "create_time": "2019-02-10",
            "checked": false
        },
        {
            "type": "images",
            "name": "我的图片2",
            "create_time": "2019-02-10",
            "checked": false
        },
        {
            "type": "text",
            "name": "我的笔记3",
            "create_time": "2019-02-10",
            "checked": true
        },
        {
            "type": "vedio",
            "name": "我的录像4",
            "create_time": "2019-02-10",
            "checked": false
        },
        {
            "type": "none",
            "name": "我的笔记4",
            "create_time": "2019-02-10",
            "checked": false
        },
        {
            "type": "dir",
            "name": "我的文件夹1",
            "create_time": "2019-02-10",
            "checked": false
        }
                ]
            }
        },
        components: {
            navBar,
            fList
        },
        onl oad() {

        },
        methods: {
            select(e){
                console.log(e)
                this.list[e.index].checked = e.item
            }
        }
    }
</script>
<style>
    @import url("/common/uni.css");
    @import url("/common/my.css");
</style>

子组件代码：

<template>
    <view class="list">
        <view class="item">
            <view style="width: 10%;text-align: center;line-height: 50rpx;">
                <view class="iconClsCon" :class="iconClass"></view>
            </view>
            <view style="width: 80%;">
                <text>{{item.name}}</text>
                <text>{{item.create_time}}</text>
            </view>
            <view class="radioconten" @click="selectfn" style="width: 10%;align-items: center;">
                <text v-if="!item.checked" class="radioicon"></text>
                <text v-else class="radioicon radioiconed"></text>
            </view>
        </view>
        <!-- {{iconClass}} -->
    </view>
</template>
<script>
    export default {
        name:'f-list',
        data(){
            return {
                icons:{
                    dir:"dirCls",
                    images:"imagesCls",
                    vedio:"vedioCls",
                    text:"textCls",
                    none:"noneCls"
                }
            }
        },
        props:{
            item:Object,
            index:[String,Number]
        },
        computed:{
            iconClass(){
                return this.icons[`${this.item.type}`]
            }
        },
        methods:{
            selectfn(){
                this.$emit('select',{
                    index:this.index,
                    item:!this.item.checked
                })
            }
        },
        created(){
            console.log("item-inconclass",this.iconClass,this.item.type)
        }
    }
</script>
<style>
    @import url("/common/uni.css");
    @import url("/common/my.css");
    .iconClsCon{
        width:30px;
        height:28px;
        margin-top:10px;
    }
    .dirCls{
        background: url(../../static/images/iconwjj.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size:100%;
    }
    .imagesCls{
        background: url(../../static/images/imagesicon.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size:100%;
    }
    .vedioCls{
        background: url(../../static/images/vedioicon.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size:100%;
    }
    .textCls{
        background: url(../../static/images/texticon.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size:100%;
    }
    .noneCls{
        background: url(../../static/images/nofindtext.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size:100%;
    }
</style>

标签：vue,name,..,url,item,repeat,background,uni,动态数据
来源： https://www.cnblogs.com/zbbk/p/15263407.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。