如何在vue頁面中通過methods回圈生成div并加入到table里面
uj5u.com熱心網友回復：
感覺你這是jquery思路vue可以直接模塊寫回圈，你不用關心什么時候插入，vue會幫你搞定的
uj5u.com熱心網友回復：
頭一次接觸vue??uj5u.com熱心網友回復：
你是要有觸發條件的么？？？還是直接頁面回圈divuj5u.com熱心網友回復：
有觸發條件的uj5u.com熱心網友回復：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 引入樣式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<table>
<tr>
<td>
<div v-if="!arr.length">點擊按鈕將有內容加入到這里</div>
<div v-else>
<div v-for="item in arr" :key="item">{{item}}</div>
</div>
</td>
</tr>
</table>
<el-button plain @click="triggerMe">按鈕</el-button>
</div>
</body>
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入組件庫 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: function () {
return {
arr:[]
}
},
methods: {
triggerMe(){
this.arr = [1,2,3,4,5]
}
},
})
</script>
</html>
uj5u.com熱心網友回復：
我不是這種在html里面參考vue的uj5u.com熱心網友回復：
沒事，你可以貼出你的代碼uj5u.com熱心網友回復：
vue和以前的jquery思想是不一樣的，以前是操作DOM現在是資料驅動視圖，就像5樓寫的一樣，只要修改對應的資料，視圖變更是vue幫你完成的uj5u.com熱心網友回復：
不管你是不是在html引入vue,及時你用vue-cli創建的專案,代碼也是一樣的,v-for就可以回圈你想要的 所謂div代碼,思路跟jq不一樣,不是在方法里面請求完回傳的時候吧資料跟div回圈代碼統一添加到dom上, vue 的話是有基本的指令給你使用 直接在template 里可以操作,建議多看一下基礎入門,看看jq跟vue兩者有什么不同,跟著demo做一下uj5u.com熱心網友回復：
回圈生成可以用v-for控制顯示/隱藏用v-if或v-show
uj5u.com熱心網友回復：
v-for methods里面操作資料轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/152727.html
標籤：JavaScript