点击按钮追加html代码,vue中如何点击按钮动态添加多个div，并给这些div附加上双击事件或者鼠标右击事件...

可以试试另一种方法，隐式创建Vue实例，比较适合封装成函数进行调用

要挂载在到#app1的根实例：

new Vue({

el: '#app1',

template: `

创建一个div

`,

methods: {

add() {

addMyCom();

},

}

});

创建一个扩展，也可以直接注册一个组件：

const myCom = Vue.extend({

render(h) {

return h('div', {

style: {

border: '1px solid black',

margin: '10px'

},

}, '被创建的div，单击会被删除');

},

destroyed() {

console.log('destroyed my-com');

}

});

函数addMyCom，向DOM中添加一个div，然后创建一个vue实例，并将其挂载到div上：

function addMyCom() {

const div = document.createElement('div');

document.body.appendChild(div);

const tar = new Vue({

el: div,

template: `

components: {

myCom,

},

methods: {

destroy() {

this.$destroy();

document.body.removeChild(this.$el);

},

},

destroyed() {

console.log('destroyed');

}

});

return tar;

}

写法有很多种，不止上面的方式，你也可以把需要动态插入的div封装成独立的模块，再以函数addMyCom的方式动态的嵌入到html中