Vue小练习 03

"""
1、有以下广告数据（实际数据命名可以略做调整）
ad_data = {
        tv: [
                {img: 'img/tv/tv1.jpg', title: 'tv1'},
                {img: 'img/tv/tv2.jpg', title: 'tv2'},
                {img: 'img/tv/tv3.jpg', title: 'tv3'},
                {img: 'img/tv/tv4.jpg', title: 'tv4'},
            ],
            phone: [
                {img: 'img/phone/phone1.jpg', title: 'phone1'},
                {img: 'img/phone/phone2.jpg', title: 'phone2'},
                {img: 'img/phone/phone3.jpg', title: 'phone3'},
                {img: 'img/phone/phone4.jpg', title: 'phone4'},
            ]
    
}

i) 有两个大标题，电视和手机，点击对应的标题，渲染对应的数据
ii) 一个字典作为一个显示单位，定义一个子组件进行渲染（涉及父子组件传参）

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

    
    
    



    
    

        电视
        手机

        
    

    
    
    



    

        

            电视
            手机
        
        
        
    
    
{{ v1 }}