Vue初识
2016-11-22 16:31
363 查看
学习vue的第一个示例,来感受下vue的方便之处。
<html> <head> <script src="http://cdn.bootcss.com/vue/1.0.27/vue.min.js"></script> <title>测试Vue.js的使用</title> </head> <body> <div id="vueTest"> <h2>请选择人员</h2> <div v-for=" p in list"> <input type="checkbox" v-model="checkedNames" v-bind:value="p">{{p.name}}<br/> -------------------可以修改人员信息------------------------ <div> 姓名:<input type="text" v-model="p.name"/><br/> 年龄:<input type="text" v-model="p.age"/><br/> 地址:<input type="text" v-model="p.address"/> </div> ---------------------------------------------------------- </div> <h2>选中的人员信息</h2> <table> <tr v-show="checkedNames.length>0"> <th>序号</th> <th>姓名</th> <th>年龄</th> <th>地址</th> </tr> <tr v-for="(index,x) in checkedNames"> <td>{{index+1}}</td> <td>{{x.name}}</td> <td>{{x.age}}</td> <td>{{x.address}}</td> </tr> </table> </div> <script type="text/javascript"> new Vue({ el: '#vueTest', data: { checkedNames: [], list:[ {name:"zhangsan",age:18,address:"zhengzhou"}, {name:"lisi",age:22,address:"xuchang"} ] } }); </script> </body> </html>
相关文章推荐
- 初识vue系列一
- 初识前端框架(Vue)打包遇到的坑~
- Vue2+VueRouter2+Webpack+Axios 构建项目实战(七)初识 *.vue 文件
- 状态管理工具vuex初识
- 初识vue系列之二
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(七)初识 *.vue 文件
- vue-初识
- Vue初识
- 初识Vue.js
- Vue实践--初识组件
- 详解Vue爬坑之vuex初识
- Vue.js-----轻量高效的MVVM框架(一、初识Vue.js)
- 初识vue——语法初解
- Vue学习笔记一:初识vue
- 初识Vue.js
- 曹可爱之最可爱-Vue.js入门 (一)初识
- Vuex初识
- 初识vue(一):相关知识介绍
- 六、VueJs 填坑日记之初识*.Vue文件
- Vue入门知识点—初识vue