84669인 학습
152542인 학습
20005인 학습
5487인 학습
7821인 학습
359900인 학습
3350인 학습
180660인 학습
48569인 학습
18603인 학습
40936인 학습
1549인 학습
1183인 학습
32909인 학습
举例,以下的插入写法对于v-show这个指令来说似乎是无效的,isShow的变化不会让view变化,数据没有双向绑定了,所以,如果是新创建的元素,该如何绑定有效的指令呢?
var newXX = document.createElement('p'); newXX.innerHTML = "" xx.appendChild(newXX)
光阴似箭催人老,日月如移越少年。
创建 DOM 元素之后再创建 Vue 实例,指定 el 包含生成的元素。
不知道你是怎么做的,我是这么做的
1.首先你的那个innerHTML里面的东西我放在一个单独的.vue文件里;2.然后在js文件里面import进来,通过Vue.extend和new创建一个实例;3.在append后,在Vue.nextTick回调里完成isShow的改变
我的Alert和Comfirm组件部分代码:Box.vue:
提示 确认 取消
提示
确认 取消
Box.js:
import Vue from "vue"; const AlertVue = Vue.extend(require('./box.vue')); let Message = (options = {}) => { let title = options.title || "提示", isConfirm = (options.isConfirm === undefined || options.isConfirm===false) ? false : true, message = typeof options === 'string' ? options : options.message; return new Promise((resolve, reject) => { let ins = new AlertVue({ el : document.createElement("p") }); ins.message = message; ins.title = title; ins.isConfirm=isConfirm; ins.onOk = () => { ins.visible = false; resolve(true); } ins.onCancel = () => { ins.visible = false; resolve(false); } document.body.appendChild(ins.$el); Vue.nextTick(() => { ins.visible = true; }); }); } let alert = (options = {}) => { let title = options.title || "提示"; let message = typeof options === 'string' ? options : options.message; return new Message(Object.assign({ isConfirm:false }, { title, message })); } let confirm = (options = {}) => { let title = options.title || "提示"; let message = typeof options === 'string' ? options : options.message; return new Message(Object.assign({ isConfirm:true }, { title, message })); } export default alert; export {confirm};
创建 DOM 元素之后再创建 Vue 实例,指定 el 包含生成的元素。
不知道你是怎么做的,我是这么做的
1.首先你的那个innerHTML里面的东西我放在一个单独的.vue文件里;
2.然后在js文件里面import进来,通过Vue.extend和new创建一个实例;
3.在append后,在Vue.nextTick回调里完成isShow的改变
我的Alert和Comfirm组件部分代码:
Box.vue:
Box.js: