vue动态添加domv-for

答

v-for是vue.js中的指令，用于遍历数组或对象中的数据，动态添加dom。使用v-for指令时，需要提供一个数组或对象，它会根据提供的数据来渲染相应的dom结构。v-for指令的语法是：v-for="(item,index) in items"，其中items是要遍历的数组或对象，item是当前遍历到的元素，index是当前遍历到的元素的索引。使用v-for指令可以快速的渲染出dom结构，而不用写大量的dom结构代码。

然后页面有几个事件是动态地增加DOM元素的,比如点击某个层会在底下列出该层详细内容,这样在FF和chrome下没出现问题,但是在IE6-8下每次都重布局了.

比如我拖动一个层,在拖动过程中层的内容又显示在最底下了,当我放开层的时候这个层就跳回拖动前的位置了...

起先我还没看出来是重布局了...然后演示了N久,挣扎了N久,终于觉得可能是由于动态增加DOM节点导致触发window.resize而使页面重布局了...

最后我不由地在心里喊了句"Thank

godness....",还好改变窗口的高度对页面布局没有影响,不然真要麻烦死了...

复制代码

代码如下:

bindResizeWindow:function(){

var

obj

=

this

$(window).resize(function(){

var

newWidth

=

$(window).width()

if(newWidth

==

obj.windowWidth){return}

obj.initUI()

obj.createUI()

obj.windowWidth

=

newWidth

})

},

只要在绑定方法中判只有宽度改变时才触发重布局事件就行了...

没理解你的提问，你的重点是each还是 *** 作动态添加的DOM？

关于 *** 作动态添加的DOM，需要用delegate或on来进行事件绑定，动态添加的DOM元素也同样绑定了该事件，原理就是事件代理，即事件冒泡。

<div class="container">

    <ul class="list-wrap">

        <li class="item">1</li>

        <li class="item">2</li>

        <li class="item">3</li>   

    </ul>     

</div> $('.container').delegate('.item','click',function(){

    handler()//执行函数

})

3. 如果必须用each来 *** 作，可以使用自定义事件，当添加新DOM之后，trigger('event_name')即可。在绑定自定义事件时的handler执行函数逻辑中使用each即可。只有dom插入页面后，才能获取到该元素

---