vue绑值(表格)
vue绑值(表格)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>JSON取数测试</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="main">
<table border=1>
<tr>
<td>id</td>
<td>name</td>
<td>type</td>
<td>location</td>
</tr>
<tr v-for="r in rows">
<td>{{r.id}}</td>
<td>{{r.name}}</td>
<td>{{r.type}}</td>
<td>{{r.location}}</td>
</tr>
</table>
</div>
</body>
<script>
$(document).ready(function () {
//发起请求
$.getJSON("json/vueceshi.json", function (result, status) {
//绑值关键代码
var v = new Vue({
el: '#main',
data: {
rows: result
}
})
});
});
</script>
</html>
json
[
{
"id": 1,
"name": "张三",
"type": "省长",
"location": "河北省"
}, {
"id": 2,
"name": "李四",
"type": "市长",
"location": "北京市"
}
]
小插曲(渲染时的判断)
<tr v-for="r in rows">
<td>
<input type="checkbox" value="1" name="">
</td>
<td style="display: none">
{{r.partnersId}}
</td>
<td>
{{r.partnersName}}
</td>
<td v-if="r.partnersType==1">
个人
</td>
<td v-else="r.partnersType==2">
机构
</td>
<td v-if="r.partnersStatus==1">
洽谈中
</td>
<td v-else="r.partnersStatus==2">
合作中
</td>
<td v-else="r.partnersStatus==3">
终止合作
</td>
<td>
{{r.partnersProprotion}}
</td>
<td>
{{r.partnersAddress}}
</td>
<td>
{{r.partnersMan}}
</td>
<td>
{{r.partnersContact}}
</td>
<td>
查看
</td>
</tr>
vue绑值(表格)的更多相关文章
- jquery给表格绑值
jquery给表格绑值 直接上代码了 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
- AJAX请求,返回json进行页面绑值
AJAX请求,返回json进行页面绑值 后台 controller @RequestMapping(value = "backjson.do",method=RequestMeth ...
- 使用JQuery对页面进行绑值
使用JQuery对页面进行绑值 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...
- vue实现简单表格组件
本来想这一周做一个关于vuex的总结的,但是由于朋友反应说还不知道如何用vue去写一个组件,所以在此写写一篇文章来说明下如何去写vue页面或者组件.vue的核心思想就是组件,什么是组件呢?按照我的理解 ...
- vue实现对表格数据的增删改查
在管理员的一些后台页面里,个人中心里的数据列表里,都会有对这些数据进行增删改查的操作.比如在管理员后台的用户列表里,我们可以录入新用户的信息,也可以对既有的用户信息进行修改.在vue中,我们更应该专注 ...
- vue v-for输出表格结构
v-for输出表格结构 数据库结构如下: 原理: 两个数组 a, b, 数组a的值,是数组b的键(索引), 变量拼接(红色区域): <table> <tr> <th v ...
- vue+element-ui实现表格checkbox单选
公司平台利用vue+elementui搭建前端页面,因为本人第一次使用vue也遇到了不少坑,因为我要实现的效果如下图所示 实现这种单选框,只能选择一个,但element-ui展示的是多选框,check ...
- vue 导出excel表格
对于涉及到数据比较多的管理后台导出excel 表格这个需求就非常的常见了 所以? vue 怎么到处excel表格的? 有两种办法 1:请求接口后台直接给你的是excel文件,你需要做的就是怎么接收ex ...
- 应用五:Vue之ElementUI 表格Table与分页Pagination组件化
(注:本文适用于有一定Vue基础或开发经验的读者,文章就知识点的讲解不一定全面,但却是开发过程中很实用的) 在平时的web项目开发过程中,列表分页查询展示应用的很频繁,为了便于阅读并减少代码的冗余,所 ...
随机推荐
- 用.NET做圣诞节音乐盒
用.NET做圣诞节音乐盒 我曾经用这个程序送给我女朋友(现老婆)
- 如何高效地学好R语言?
如何高效地学好R语言? 学R语言主要在于5点三阶段: 第一阶段有一点:基础的文件操作(read.*, write.*).数据结构知识,认识什么是数据框(data.frame).列表(list).矩阵( ...
- java常用排序
1.冒泡排序 public static int[] bubble(int[] a){ for(int i=0;i<a.length-1;i++){ int tmp=0; for(int j=0 ...
- Jenkins构建触发器的区别
Build periodically:定时进行项目构建或执行(它不care源码是否发生变化),配置如下: 0 2 * * * (每天2:00 必须build一次源码) 如果是要定时执行脚本,需要选择 ...
- upc组队赛14 Floating-Point Hazard【求导】
Floating-Point Hazard 题目描述 Given the value of low, high you will have to find the value of the follo ...
- 垃圾循环li
function hezhu() { // var lis= $("#aaa").find("treeview"); ////var lis= document ...
- 如何取消bootstrap浮动时的padding值
在bootstrap框架中使用浮动时,可以对元素添加pull-left 或 pull-right 类来达到目的.但是框架会默认给该元素添加一个15px的左右padding. <div class ...
- java虚拟机规范(se8)——java虚拟机的编译(四)
3.12 抛出和处理异常 在程序中使用throw关键字来抛出异常.编译结果很简单. void cantBeZero(int i) throws TestExc { if (i == 0) { thro ...
- [unity基础教程]Unity3D实现动态载入游戏资源(转)
用Unity3D制作基于web的网络游戏,不可避免的会用到一个技术-资源动态载入.比方想载入一个大场景的资源,不应该在游戏的開始让用户长时间等待全部资源的载入完成.应该优先载入用户附近的场景资源.在游 ...
- L2Dwidget
只需要在[页首html代码]中引入L2Dwidget.js即可.<!-- 右下角live2d效果 --> <script src="https://eqcn.ajz.mie ...