vue work父子组件渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            border-radius: 10px;
            overflow: hidden;
        }
        .box img{
            width: 200px;
            height: 240px;
        }
    </style>
<body>
<div id="app01">
  <div >
        <button @click="choice('tvImg')">电视</button>
        <button @click="choice('phoneImg')">手机</button>
      <p>{{msg}}</p>
      <local v-for="img in imgList" :img="img" @receive="data"></local>


  </div>
</div>
</body>
<script src="bootstrap-3.3.7-dist/js/vue.min.js"></script>
<script>


    let picture ={
          tvImg: [
          {img: 'img/tv1.jpg', title: 'tv1'},
          {img: 'img/tv2.jpg', title: 'tv2'},
          {img: 'img/tv3.jpg', title: 'tv3'},
          {img: 'img/tv4.jpg', title: 'tv4'},
         ], phoneImg : [
          {img: 'img/phone1.jpg', title: 'phone1'},
          {img: 'img/phone2.jpg', title: 'phone2'},
          {img: 'img/phone3.jpg', title: 'phone3'},
          {img: 'img/phone4.jpg', title: 'phone4'},
         ]
    };


    let local = {
      props:['img'],
      template: `
      <div class="box" @click="f1" >
      <img :src="img.img" alt="">
      <h2>{{img.title}}</h2>
      </div>
      `,
        methods: {
          f1(){
              this.$emit('receive',this.img)
          }
        }

    };

    new Vue({
        el:'#app01',
        data:{
           imgList:[],
            msg:''

        },
        methods:{
          choice(a){
              this.imgList=picture[a];
              this.msg='未选中广告'
          },
          data(b){
              if (b){
                 this.imgList=[{img:b.img,title:b.title}];
                 this.msg=`${b.title}被选中了`;
              }else {
                  this.msg=`未选中广告`;
              }

          }
        },
        components:{
            local
        }
    });

</script>
</html>
vue work父子组件渲染

猜你喜欢
