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: