zoukankan      html  css  js  c++  java
  • vue实现图片放大

    <script>
      var Event = new Vue();
     
      //组件A
      var A = {
        data: function() {
          return {
            a: "../images/1.jpg",
            b: "../images/2.png",
            c: "../images/3.jpg"
          }
        },
        template: `<div>
    <img :src="a" width="200px" height="150px" @click="send">
    <img :src="b" width="200px" height="150px" @click="send1">
    <img :src="c" width="200px" height="150px" @click="send2">
           </div>
        `,
        methods: {
          send:function(){
            Event.$emit("a-msg", this.a);
          },
    send1:function(){
            Event.$emit("a-msg", this.b);
          },
    send2:function(){
            Event.$emit("a-msg", this.c);
          }

        }
      };

      //组件B
      var B = {
        template: `
          <div>
    <img :src="a" width="600px" height="500px">
          </div>
        `,
        mounted () {

          //接收A组件的数据
          Event.$on("a-msg", function (msg) {
    this.a=msg;
          }.bind(this));
     
        },
        data () {
          return {
            a: "../images/1.jpg",
            
          }
        }
      };

      window.onload = function () {

        new Vue({
          el: "#box",
          components: {
            "dom-a": A,
            "dom-b": B
          }
        });

      };
    </script>
     <div id="box">
        <dom-a></dom-a>
        <dom-b></dom-b>
     </div>

  • 相关阅读:
    windows phone 自动隐藏的Popup from http://www.cnblogs.com/LoveJenny/archive/2011/07/14/2105869.html
    Linq update
    Windows Phone 7 MVVM模式数据绑定和传递参数 from:http://www.cnblogs.com/linzheng/archive/2011/03/27/1997086.html
    web 常见攻击与防护
    SFSA
    HDU 3530
    一笔话问题
    学习技巧
    练题宝典
    雪花
  • 原文地址:https://www.cnblogs.com/JKMI/p/7875375.html
Copyright © 2011-2022 走看看