2 qq 32719145 qq_32719145 于 2017.09.14 16:37 提问

动态生成的html无法绑定vue指令

是这样的,点击一个按钮弹出一个框,然后在HTML中绑定了vue的model和on,但是都不生效,可是不是动态生成也就是一打开页面就展现的内容中,指令是生效的。图片说明图片说明图片说明图片说明图片说明图片说明图片说明图片说明图片说明图片说明图片说明

5个回答

playboyanta123
playboyanta123   2017.09.14 17:53
已采纳

看你图片的代码啥都看不出来,你应该把所有的代码贴出来,你图片里是弹出框内容的htm吧?我感觉是你用错了,vue是基于数据驱动的,只要改变
开始注册的代表显示数据的值,就能让弹出框是隐藏还是显示,比如:

 <h1 v-if="seen">if you can see me</h1>
 <input type="button" class="btn" v-bind:value="seen ? '隐藏' : '显示'" v-on:click="switchSeen">
var app = new Vue({
                el: '#app',
                data: {
                    seen:true,
                },
                methods:{//方法,可以传参数进来
                    switchSeen:function(e){
                        //e.target可获取当前元素
                        this.seen = !this.seen;
                    }
                }
            });

sunny_desmond
sunny_desmond   2017.09.14 17:13

你可以在data中定义一个参数,然后click的时候动态改变这个参数的布尔值,让他展示或者消失就好了啊。举个例子:

<template>
    <div class="test">
        <div :class="{toggle:toggleFlag}">这是要展示或者隐藏的内容</div>
        <button @click="showTest">我是按钮</button>
    </div>
</template>


<script>
export default {
    name:"test",
    data() {
        return {
            toggleFlag: true
        }
    },
    methods:{
        showTest(){
            this.toggleFlag = !this.toggleFlag;
        }
    }
}

</script>  

<style lang="scss" scoped>
    .toggle{
        display: none;
    }
</style>


qq_26879441
qq_26879441   2017.09.14 16:41

应该不会吧。真不行的话 试试转义一下指令呗

sunny_desmond
sunny_desmond   2017.09.14 16:54

把你的代码贴上来看一下呢~~

qq_32719145
qq_32719145 稍等我拍一下
2 个月之前 回复
qq_32719145
qq_32719145   2017.09.14 17:00

点击一个按钮,将这段html展现出来,是在el绑定的id之下,也是在那个vue的管理中吧图片

Csdn user default icon
上传中...
上传图片
插入图片