- <!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>
来源: http://www.bubuko.com/infodetail-3338544.html