月獠_189 发布于 2017-05-14 23:39

举例,以下的插入写法对于v-show这个指令来说似乎是无效的,isShow的变化不会让view变化,数据没有双向绑定了,所以,如果是新创建的元素,该如何绑定有效的指令呢?

 var newXX = document.createElement('p');
 newXX.innerHTML = ""
 xx.appendChild(newXX)
3 个回答
  • 不知道你是怎么做的,我是这么做的

    1.首先你的那个innerHTML里面的东西我放在一个单独的.vue文件里;
    2.然后在js文件里面import进来,通过Vue.extend和new创建一个实例;
    3.在append后,在Vue.nextTick回调里完成isShow的改变

    我的Alert和Comfirm组件部分代码:
    Box.vue:

    <template>
        <transition name="fade">
            <p class="ui-alert" v-if="visible">
                <p class="ui-msg-box">
                    <p class="ui-title" v-text="title">提示</p>
                    <p class="ui-msg" v-text="message"></p>
                    <p class="ui-buttons">
                        <a class="btn" href="javascript:;" @click="onOk">确认</a>
                        <a v-if="isConfirm" class="btn" href="javascript:;" @click="onCancel">取消</a>
                    </p>
                </p>
                <p class="ui-mask"></p>
            </p>
        </transition>
    </template>
    <script type="text/javascript">
        export default {
            props: {
                title: String,
                message : String
            },
            data() {
                return {
                    isConfirm:true,
                    visible: false,
                    onOk:null,
                    onCancel:null
                };
            },
            methods: {
                onOk() {
                    this.onOk && this.onOk();
                },
                onCancel() {
                    this.onCancel && this.onCancel();
                }
            }
        }
    </script>

    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};
    2017-05-15 14:14 回答
  • 创建 DOM 元素之后再创建 Vue 实例,指定 el 包含生成的元素。

    2017-05-15 11:40 回答
  • 代闓发票有需要请联系我手机微信13640241413
    回答问题...

    2020-04-01 17:49 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
活跃用户
  • 1
    问道摩托
  • 2
    袁广龙976丶
  • 3
    逍遥子
  • 4
    亮仔
  • 5
    芙蓉花
  • 6
    作小die_syj
  • 7
    王丽珠景平怡伦_621
  • 8
    adfa3sd5f6a
  • 9
    欣欣大妮
  • 10
    sfasfs
PHP1.CN | 中国最专业的PHP中文社区 | PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | PHP问答
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有