• Vue --- 组件练习


    ad_data = {
    tv: [
    {img: 'img/tv/001.png', title: 'tv1'},
    {img: 'img/tv/002.png', title: 'tv2'},
    {img: 'img/tv/003.png', title: 'tv3'},
    {img: 'img/tv/004.png', title: 'tv4'},
    ],
    phone: [
    {img: 'img/phone/001.png', title: 'phone1'},
    {img: 'img/phone/002.png', title: 'phone2'},
    {img: 'img/phone/003.png', title: 'phone3'},
    {img: 'img/phone/004.png', title: 'phone4'},
    ]
    }

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

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

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body,h2 {
                margin: 0;
            }
            .wrap {
                 880px;
                margin: 0 auto;
            }
            .wrap:after {
                content: '';
                display: block;
            }
            .box {
                 200px;
                border-radius: 10px;
                overflow: hidden;
                background-color: #eee;
                float: left;
                margin: 10px;
            }
    
            .box img {
                 200px;
                height: 240px;
            }
            .box h2 {
                text-align: center;
                font-weight: normal;
                font-size: 20px;
            }
    
    
        </style>
    
    <body>
    <!--2、有以下广告数据(实际数据命名可以略做调整)-->
    <!--ad_data = {-->
        <!--tv: [-->
            <!--{img: 'img/101.jpg', title: 'tv1'},-->
            <!--{img: 'img/102.jpg', title: 'tv2'},-->
            <!--{img: 'img/103.jpg', title: 'tv3'},-->
            <!--{img: 'img/104.jpg', title: 'tv4'},-->
        <!--],-->
        <!--phone: [-->
            <!--{img: 'img/201.jpg', title: 'phone1'},-->
            <!--{img: 'img/202.jpg', title: 'phone2'},-->
            <!--{img: 'img/203.jpg', title: 'phone3'},-->
            <!--{img: 'img/204.jpg', title: 'phone4'},-->
        <!--]-->
    <!--}-->
    
    <!--i) 有两个大标题,电视和手机,点击对应的标题,渲染对应的数据-->
    <!--ii) 一个字典作为一个显示单位,定义一个子组件进行渲染(涉及父子组件传参)-->
    
    
    <div id="add">
        <h2 @click="t1">电视</h2>
        <h2 @click="p1">手机</h2>
        <div class="wrap" v-if="tt">
            <my-tv v-for="t2 in holl.tv" :im="t2.img" :tit="t2.title" ></my-tv>
        </div>
    
        <div class="wrap" v-if="pp">
            <my-tv v-for="p2 in holl.phone" :im="p2.img" :tit="p2.title" ></my-tv>
        </div>
    </div>
    
    
    
    </body>
    <script src="js/vue.js"></script>
    <script>
        let ad_data = {
        tv: [
            {img: 'img/101.jpg', title: 'tv1'},
            {img: 'img/102.jpg', title: 'tv2'},
            {img: 'img/103.jpg', title: 'tv3'},
            {img: 'img/104.jpg', title: 'tv4'},
        ],
        phone: [
            {img: 'img/201.jpg', title: 'phone1'},
            {img: 'img/202.jpg', title: 'phone2'},
            {img: 'img/203.jpg', title: 'phone3'},
            {img: 'img/204.jpg', title: 'phone4'},
        ]
    };
    
    
        let myTv={
          props:['im','tit'],
          template :`
                <div class="box">
                    <img :src="im" alt="">
                    <h2>{{ tit }}</h2>
                </div>
          `,
    
        };
    
        let myPh={
          props:['im','tit'],
          template :`
                <div class="box">
                    <img :src="im" alt="">
                    <h2>{{ tit }}</h2>
                </div>
          `,
    
    
        };
    
    
        new Vue({
            el:'#add',
            data:{
                holl:ad_data,
                tt:'',
                pp:''
            },
            components:{
                myTv,
                myPh
    
            },
            methods:{
                t1(){
                    this.tt=1
                },
                p1(){
                    this.pp=1
                }
            }
        })
    </script>
    </html>
    

    页面最下方有一个 h2 标签,用来渲染用户当前选择的广告(点击哪个广告就是选中哪个广告)

    i)当没有点击任何广告,h2 标签显示:未选中任何广告
    ii)当点击其中一个广告,如tv1,h2 标签显示:tv1被选中

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body,h2 {
                margin: 0;
            }
            .wrap {
                 880px;
                margin: 0 auto;
            }
            .wrap:after {
                content: '';
                display: block;
            }
            .box {
                 200px;
                border-radius: 10px;
                overflow: hidden;
                background-color: #eee;
                float: left;
                margin: 10px;
            }
    
            .box img {
                 200px;
                height: 240px;
            }
            .box h2 {
                text-align: center;
                font-weight: normal;
                font-size: 20px;
            }
            .gg {
                margin-top: 615px;
                margin-left: 45%;
            }
    
    
        </style>
    
    <body>
    <!--3、在第2题基础上,页面最下方有一个 h2 标签,用来渲染用户当前选择的广告(点击哪个广告就是选中哪个广告)-->
    <!--i)当没有点击任何广告,h2 标签显示:未选中任何广告-->
    <!--ii)当点击其中一个广告,如tv1,h2 标签显示:tv1被选中-->
    
    <div id="add">
        <h2 @click="t1">电视</h2>
        <h2 @click="p1">手机</h2>
        <div class="wrap" v-if="tt">
            <my-tv v-for="t2 in holl.tv" :im="t2.img" :tit="t2.title" @tb="tb1"></my-tv>
        </div>
    
        <div class="wrap" v-if="pp">
            <my-ph v-for="p2 in holl.phone" :im="p2.img" :tit="p2.title"  @ppb="pbb1"></my-ph>
        </div>
    
        <h2 class="gg">{{ h2 }}</h2>
    
    </div>
    
    
    
    </body>
    <script src="js/vue.js"></script>
    <script>
        let ad_data = {
        tv: [
            {img: 'img/101.jpg', title: 'tv1'},
            {img: 'img/102.jpg', title: 'tv2'},
            {img: 'img/103.jpg', title: 'tv3'},
            {img: 'img/104.jpg', title: 'tv4'},
        ],
        phone: [
            {img: 'img/201.jpg', title: 'phone1'},
            {img: 'img/202.jpg', title: 'phone2'},
            {img: 'img/203.jpg', title: 'phone3'},
            {img: 'img/204.jpg', title: 'phone4'},
        ]
    };
    
    
        let myTv={
          props:['im','tit'],
          template :`
                <div class="box" @click="tt1">
                    <img :src="im" alt="">
                    <h2>{{ tit }}</h2>
                </div>
          `,
            methods:{
              tt1(){
                  this.$emit('tb',this.tit)
              }
            }
    
        };
    
        let myPh={
          props:['im','tit'],
          template :`
                <div class="box" @click="bb1">
                    <img :src="im" alt="">
                    <h2>{{ tit }}</h2>
                </div>
          `,
            methods:{
              bb1(){
                  this.$emit('ppb',this.tit)
              }
            }
    
        };
    
    
        new Vue({
            el:'#add',
            data:{
                holl:ad_data,
                tt:'',
                pp:'',
                h2:'未选中任何商品',
    
            },
            components:{
                myTv,
                myPh
    
            },
            methods:{
                t1(){
                    this.tt=1
                },
                p1(){
                    this.pp=1
                },
                tb1(a){
                    this.h2=a
                },
                pbb1(a){
                    this.h2=a
                }
    
            }
        })
    </script>
    </html>
    
  • 相关阅读:
    URL vs. HTML 录制模式
    多机联合产生负载
    浏览器打开URL的方式和加载过程
    与前端性能相关的头信息
    HTTP协议结构
    前端优化
    前端性能测试工具
    Apache 服务器
    java回调机制
    不允许用大于号小于号,比较任意两个数字大小
  • 原文地址:https://www.cnblogs.com/whkzm/p/12065724.html
Copyright © 2020-2023  润新知