小练习、组件传参、渲染

2019-12-25 20:56:26 阅读：183 来源： 互联网

1、有以下广告数据（实际数据命名可以略做调整）

i) 有两个大标题，电视和手机，点击对应的标题，渲染对应的数据

ii) 一个字典作为一个显示单位，定义一个子组件进行渲染（涉及父子组件传参）

2、在第1题基础上，页面最下方有一个 h2 标签，用来渲染用户当前选择的广告（点击哪个广告就是选中哪个广告）
i）当没有点击任何广告，h2 标签显示：未选中任何广告
ii）当点击其中一个广告，如tv1，h2 标签显示：tv1被选中

 <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body, h2{
            margin: 0;
        }
        .wrap {
            width: 880px;
            margin: 0 auto;
        }
        .wrap:after{
            content:'';
            display: block;
            clear: both;
        }

        .box {
            width: 200px;
            border-radius: 10px;
            overflow: hidden;
            background: #dddddd;
            float: left;
            margin: 10px;
        }
        .box img{
            width: 100%;
            height: 240px;
        }
        .box h2 {
            text-align: center;
            font-weight: normal;
            font-size: 20px;
        }

        .nav, h2{
            text-align: center;
        }
        .active{
            background-color: pink;   /*点击高亮第一步：设置高亮颜色*/
        }

    </style>
</head>

<body>
    <div id="app">
        <div class="nav">
            <button @click="page='tv'" :class="{active: page === 'tv'}">TV</button>  <!--点击高亮第三步：给button绑定点击事件，并控制属性设置属性值-->
            <button @click="page='phone'" :class="{active: page === 'phone'}">Phone</button>  <!--点击高亮第三步：给button绑定点击事件，并控制属性设置属性值-->
        </div>
        <!--展示数据-->
        <div class="wrap" v-if="page === 'tv'">  <!--根据点击事件的属性值，设置if判断-->
            <tag v-for="tv in ad_data.tv" :ad="tv" :key="tv.title" @action="change_select"></tag>  <!--子传父：3、子组件中定义点击事件的执行函数@action="change_select"，拿到ad数据"-->
        </div>

        <div class="wrap" v-else-if="page === 'phone'" >  <!--根据点击事件的属性值，设置if判断-->
            <tag v-for="phone in ad_data.phone" :ad="phone" :key="phone.title" @action="change_select"></tag>
        </div>

        <h2>{{ select_ad}}</h2>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    let ad_data = {
        tv: [
            {img: 'img/tv/001.jpg', title: 'tv1'},
            {img: 'img/tv/002.jpg', title: 'tv2'},
            {img: 'img/tv/003.jpg', title: 'tv3'},
            {img: 'img/tv/004.jpg', title: 'tv4'},
        ],
        phone: [
            {img: 'img/phone/100.jpg', title: 'phone1'},
            {img: 'img/phone/200.jpg', title: 'phone2'},
            {img: 'img/phone/300.jpg', title: 'phone3'},
            {img: 'img/phone/400.jpg', title: 'phone4'},
        ]
    };

    let tag ={
        props:['ad'],  // 父传子：子组件通过props自定义组件属性，通过反射拿到父组件中的数据
        template:`
            <div class="box" @click="send_ad(ad)" >
                <img :src="ad.img" alt="">
                <h2>{{ ad.title}}</h2>
            </div>
        `,                               <!--子传父：1、子组件中定义点击事件@click="send_ad(ad)"-->
        methods:{
            send_ad(ad){                 <!--子传父：2、子组件中触发点击事件中定义的send_ad(ad)，带出ad数据"-->
                this.$emit('action', ad);
            }
        }
    };

    new Vue({
        el: '#app',
        data: {
            ad_data,   // 数据注册
            page:'tv',  // 点击高亮第二步：设置 属性参数‘page’
            select_ad:'未选择'
        },
        components:{  // 子组件注册
            tag,
        },
        methods:{
            change_select(ad){  <!--子传父：4、父组件中执行点击事件@action="change_select"，拿到ad数据"-->
                this.select_ad = `${ad.title}被选中`;
            }
        }

    })
</script>
</html>

标签：传参,ad,img,title,tv,渲染,jpg,h2,组件
来源： https://www.cnblogs.com/allenchen168/p/12098828.html

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

ICode9

小练习、组件传参、渲染