点击按钮追加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中

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

vue中如何点击返回上一页，vue判断没有上页返回首页
vue中如何点击返回上一页,vue判断没有上页返回首页 vue中返回上一页 // 返回 returnBtn(){this.$router.go(-1); }, 返回上一页,先判断是否有上一页,没有则返 ...
vue两个按钮切换_在vue中实现多个按钮样式的点击切换？
1.在vue中实现多个按钮样式的点击切换?有多个按钮,点击其中一个出现下划线,而另一个回到原始状态. 点击其中一个两个同时出现下划线样式: 再次点击两个都还原成最初的样式,即有下划线: 如何实现只有被 ...
【Vue】Vue 中如何点击跳转页面
2022-04-11更新:完整的跳转页面方法的详解:[Vue | 补洞 | 18]编程式路由导航思路:在有路由的情况下,对页面进行注册,并通过方法对路由中的实例(页面)进行转发,达到跳转页面的效果 ...
Vue 中实现点击按钮
在 Vue 中实现点击按钮复制功能: 因为之前做过一个项目,有网关标识和场景标识,都是32个长度的随机字符串,后期需要用到这两个标识,以前用户可以手动复制过去用,但是随着数据的增多,这两个标识可能太 ...
vue中el-radio-group点击事件，双击取消
vue中el-radio-group点击事件普通用法需要实现双击取消普通用法需要注意,如果@change事件除了当前选中的单选按钮的label值,还需要带上另外的参数,则需要用event来代替 ...
html点击空白处关闭,vue中实现点击空白区域关闭弹窗的两种方法
1. 第一种做法首页在外层容器里面取一个名字为main,即ref="main",当bankSwitch为true的时候,弹窗出现你好我是弹窗里面的内容部分所触发的事件如下: ...
前端Vue中实现超炫酷动态背景(全屏背景+自定义banner+登录/注册页)
一.文章引导 #mermaid-svg-9sKRaMRBkdCcbAh2 {font-family:"trebuchet ms",verdana,arial,sans-serif; ...
vue中手机端点击手机键盘的完成 / 搜索按钮触发文本框搜索
看到标题,你可能第一反应是想着监听手机键盘的[完成]或[搜索]按钮,然后触发事件do something but ,No No No ,没有那么艰难复杂. vue中,要在手机端点击手机键盘的[完成]或 ...
vue中，点击button按钮后，页面上的input框再次自动获取焦点
需求:点击button按钮,录入成功后,页面上的input框自动聚焦,快速进行下一次录入,提高效率开始尝试了几种方法都没有成功一.首先想到的用vue指令 v-focus,然而没有成功 <In ...

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

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

最新文章

热门文章