vue動態渲染dom,沒能解決


頁面上選擇框值發生變化的時候,vue中data中某數組值發生改變,通過created獲取的數據打印確實可以隨着選擇值的改變而改變,但是dom渲染只是第一次渲染的界面,網上查詢的方法都沒有解決問題,Vue.set(),或者數組遍歷之后再push()都沒有解決問題。

  1.data的數據可以動態改變,渲染沒有變,如何解決。

  2.vue掛載元素的事件寫入vue中,獨立寫原生js不會生效。

不得不選擇用原生js或者jq來實現,append動態添加的節點,但是要注意:

  1.動態節點,一一添加,不能標簽嵌套標簽

  2.img節點的src屬性不能直接再append中寫入屬性,需要單獨設置,否則報錯找不到圖片

  3.動態節點綁定事件。

代碼實例:

var dataarr = arr;
$(".interactivemainwrap").html("");
for(var i = 0; i < dataarr.length; i++){
$('.interactivemainwrap').append("<li class='no'></li>");
$('.interactivemainwrap li').eq(i).append("<img/>");
$('.interactivemainwrap li').eq(i).find("img").attr("src",dataarr[i].avator);
$('.interactivemainwrap li').eq(i).append("<p>"+dataarr[i].name+"</p>");
$('.interactivemainwrap li').eq(i).append("<small class='addbtn'></small>");
}

arr是動態改變的數組,長度,值都在改變。vue如何做?


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM