javascript - VUE的Mehod里用DOM方法或者InnerHTML方法后，样式不一样了？

问题描述

问 题

data () {
    return {
      checkboxInnerHTML: "<input type='checkbox' disabled=''/><input type='text' placeholder='问题内容'><span class='dele-self'>X</span>"
    }

下面是method的代码。

var div = document.createElement('div')
div.className = 'checkboxs'
div.innerHTML = this.checkboxInnerHTML
target.appendChild(div)

下面是图片

下面是浏览器渲染后的代码

可以看到本来渲染的时候添加了个data-v-f8e55162的样式，但是通过innerHTML加入的就没有。

求大神指点迷津！

解决方案

看你的需求应该是可以增加/删除一行输入。
那么可以定义一个数组，然后 v-for 渲染checkboxInnerHtml，删除一行就删除数组中对应$index的元素，添加就push一个数组元素进入数组，就会添加一行输入了。

不懂可追问，贴个之前做过的同类型删减版代码：

data:
scriptList:[{
    index:0,
    parameters:[''],
    script:[],
}]

模板：
<template v-for="param in script.parameters" track-by="$index">
    <input type="text" class="p-a-0-25 m-b-0-25 b-a b-a-radius-0-125 m-r-0-25 pull-xs-left" v-model="param" style="width:45%;">
    <span @click="removeParam($index,$event)"><i class="ti-close pull-xs-left" style="margin-left: -17px;"></i></span>                        
</template>

method:
             addParam:function(){
                    this.scriptList[index].parameters.push('');
                }                
            },
            //移除参数输入框
            removeParam:function(index,e){
                let self = this,
                    removeIndex = $(e.currentTarget).parents('div').attr('id').split('m')[1];//获取移除的数组元素下标，此处自己变通一下
                    self.scriptList[removeIndex].parameters.splice(index,1);                                                
                    }
                })                
            },

以上代码增删的是脚本参数~~~

这篇关于javascript - VUE的Mehod里用DOM方法或者InnerHTML方法后，样式不一样了？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！