生活随笔
收集整理的這篇文章主要介紹了
Vue框架之条件与循环的使用
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
如果是初學(xué)者的話，這里先給你一個(gè)基礎(chǔ)知識的框圖，可以了解一下下面代碼的由來。
也可以選擇我這個(gè)鏈接Vue條件與循環(huán)跳轉(zhuǎn)到Vue官網(wǎng)進(jìn)行學(xué)習(xí)。
上面是Vue的一個(gè)簡單案例，不要急，進(jìn)階版來了，通過這個(gè)框架應(yīng)用到你的表格創(chuàng)建里面，非常省事哦。
運(yùn)行結(jié)果:
<!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>學(xué)號
</th></tr></thead><tbody class="表數(shù)據(jù)"><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;}.表數(shù)據(jù){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>
主要注釋可見代碼：
繼續(xù)敲黑板的是：
想用vue框架，請記得務(wù)必去下載其js文件
應(yīng)該官網(wǎng)可以下載到，比較懶的像我一樣的童鞋也可以直接跳這個(gè)鏈接Vue的js文件下載，我這里已經(jīng)將上傳資源設(shè)置為了免費(fèi)哈，只為提供一個(gè)方便。
表格css三個(gè)t的使用看這里:表格css的簡單應(yīng)用
總結(jié)
以上是生活随笔為你收集整理的Vue框架之条件与循环的使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
