使用Vue将单击的图像src复制到其他元素背景属性

Question

我使用Vue资源（ajax）加载图像。如何复制单击的图像src属性并在div背景属性中使用它？

Answer 1

答案： https://jsfiddle.net/q7xcbuxd/32/

<div id="app">
    Click on the image:<br/>
    <img id="img" src="https://avatars3.githubusercontent.com/u/2885?v=3&s=96" v-on="click: copySrc">
    <div>
        {{src}}
    </div>
</div>


var vue = new Vue({
    el: '#app',

    data: {
        src: ""
    },

    methods: {
        copySrc: function(img){
            this.src = img.srcElement.src;
        }
    }
});

Answer 2

您可以使用以下方式复制点击元素测试：

new Vue({
    el: '#app',
    data: { src: ""},
    methods: {
        copySRC: function(event){
            this.src = event.target.src;
            this.copyClipboard();
        },
        copyClipboard: function() {
          this.$refs["input"].select();
          document.execCommand("copy");
        }
    }
});

img,input {
 display:block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <img
    src="https://picsum.photos/100"
    @click="copySRC"
    title="click to copy in the input"
  />
  <input
    v-model="src"
    ref="input"
    @click="copyClipboard"
    title="click to copy in clipboard"
  />
</div>