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><!-- 这个案例能够帮助简单理解一下Vue渲染Dom的基本操作，是为看懂案例二做准备工作的。el（element）data：（数据的初始化或者更新导入）应用的时候如果复制了全部代码，一定要记得把js路径改成自己的，而且也要自己下载vue框架的js。 --><br /><br /><!--案列二--><div id="domain2"><table border="1px"><!-- thead，tbody，tfoot标签是表格css的基础哦，巨实用，详细的可以看同一专栏的表格css之thead专题 --><thead class="表头"><tr><th>班级</th><th>姓名</th><th>学号</th></tr></thead><tbody class="表数据"><tr v-for="stu in stus">         <!-- （循环v-for） --><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"}]'//注意json的书写格式，都是键值对的形式，而且双引号不能省略。var app=new Vue({el:'#domain2',data:{stus:eval(json)                  // eval可以用来分解json那样的字符串类型}})</script></body>
</html>