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>

主要注释可见代码：
继续敲黑板的是：
想用vue框架，请记得务必去下载其js文件
应该官网可以下载到，比较懒的像我一样的童鞋也可以直接跳这个链接Vue的js文件下载，我这里已经将上传资源设置为了免费哈，只为提供一个方便。

表格css三个t的使用看这里:表格css的简单应用

Vue框架之条件与循环的使用相关推荐

Vue 一套构建用户界面的渐进式的框架（条件与循环篇~）
条件语句条件判断 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
Vue——基础(对象、属性样式操作、条件、循环、事件、绑定)
目录 vue对象 vue操作属性 vue操作样式三元运算条件渲染循环语句 click事件双向绑定数据 vue对象 1.创建: new Vue({ - }) 2.属性: 属性描述 el 需要管 ...
vue中集合取第一个_快速学习Vue框架（知识点集合）
学习Vue的小伙伴速度看过来,快速学习Vue框架知识点集合贴来啦.建议收藏,尤其基础并不是很扎实的同学,本篇集合贴就是你日后工作的参考手册. 基础知识: ·vue的生命周期:beforeCreate/ ...
Vue框架的入门基础学习
当创建新的vue项目时,遇到无法加载文件 E:\node\node_global\vue.ps1,因为在此系统上禁止运行脚本的错误,以下为解决办法. vue中文文档菜鸟教程:Vue.js 该笔记只是 ...
Vue框架自学笔记（一）——初识Vue
vue是什么? Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架. 与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅 ...
Vue框架的学习与使用
文章目录 VUE简介前端为主的MV时代双向绑定 787原则 Vue的7种属性 Vue的8种方法 Vue的7种指令条件与循环元素绑定绑定事件 Vue组件与自定义元素的关系 Vue的生命周期 ...
第四篇：python基础之条件和循环
阅读目录一.if语句 1.1 功能 1.2 语法 1.2.1:单分支,单重条件判断 1.2.2:单分支,多重条件判断 1.2.3:if+else 1.2.4:多分支if+elif+else 1.2. ...
react框架和vue框架的区别以及相同之处
简单介绍 React–Facebook创建的JavaScript UI框架.它支撑着包括Instagram在内的大多数Facebook网站.React与当时流行的jQuery,Backbone.js和 ...
前端笔记-Vue框架的基本认识
目录基本概念 div与vue实例绑定挂载点,模板,实例之间的关系插入页面的其他写法模板指令 Vue中的属性绑定和双向数据绑定 Vue中的计算属性和侦听器 v-if,v-show,v-for指令 ...

Vue框架之条件与循环的使用

Vue框架之条件与循环的使用相关推荐

最新文章

热门文章