生活随笔
收集整理的這篇文章主要介紹了
Vue框架之条件与循环的使用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
如果是初學者的話，這里先給你一個基礎知識的框圖，可以了解一下下面代碼的由來。
也可以選擇我這個鏈接Vue條件與循環跳轉到Vue官網進行學習。
上面是Vue的一個簡單案例，不要急，進階版來了，通過這個框架應用到你的表格創建里面，非常省事哦。
運行結果:
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>123
</title><script src="js/vue2.6.min.js"></script></head><body><div id="domain1"><h1>前端行
</h1>telenum:
<span class="telenum">{{ telenum }}
</span><br />address:
<span class="address">{{ address }}
</span></div><script>var telenum='155144133122'var address='四海為家'var app=new Vue({el:'#domain1',data:{telenum:telenum,address:address}})</script><br /><br /><div id="domain2"><table border="1px"><thead class="表頭"><tr><th>班級
</th><th>姓名
</th><th>學號
</th></tr></thead><tbody class="表數據"><tr v-for="stu in stus"> <td>{{stu.class}}
</td><td>{{stu.name}}
</td><td>{{stu.num}}
</td></tr></tbody></table></div><style>.表頭{color: aquamarine;}.表數據{color: cornflowerblue;}</style><script>var json='[{"class":"B19531","name":"甲","num":"20194054221"},{"class":"B19531","name":"乙","num":"20194054222"},{"class":"B19532","name":"丙","num":"20194054223"},{"class":"B19533","name":"丁","num":"20194054224"},{"class":"B19533","name":"憨憨","num":"20194054225"}]'var app=new Vue({el:'#domain2',data:{stus:eval(json) }})</script></body>
</html>
主要注釋可見代碼：
繼續敲黑板的是：
想用vue框架，請記得務必去下載其js文件
應該官網可以下載到，比較懶的像我一樣的童鞋也可以直接跳這個鏈接Vue的js文件下載，我這里已經將上傳資源設置為了免費哈，只為提供一個方便。
表格css三個t的使用看這里:表格css的簡單應用
總結
以上是生活随笔為你收集整理的Vue框架之条件与循环的使用的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
