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绑值（表格）的更多相关文章

  1. jquery给表格绑值

    jquery给表格绑值 直接上代码了 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  2. AJAX请求,返回json进行页面绑值

    AJAX请求,返回json进行页面绑值 后台 controller @RequestMapping(value = "backjson.do",method=RequestMeth ...

  3. 使用JQuery对页面进行绑值

    使用JQuery对页面进行绑值 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...

  4. vue实现简单表格组件

    本来想这一周做一个关于vuex的总结的,但是由于朋友反应说还不知道如何用vue去写一个组件,所以在此写写一篇文章来说明下如何去写vue页面或者组件.vue的核心思想就是组件,什么是组件呢?按照我的理解 ...

  5. vue实现对表格数据的增删改查

    在管理员的一些后台页面里,个人中心里的数据列表里,都会有对这些数据进行增删改查的操作.比如在管理员后台的用户列表里,我们可以录入新用户的信息,也可以对既有的用户信息进行修改.在vue中,我们更应该专注 ...

  6. vue v-for输出表格结构

    v-for输出表格结构 数据库结构如下: 原理: 两个数组 a, b,  数组a的值,是数组b的键(索引), 变量拼接(红色区域): <table> <tr> <th v ...

  7. vue+element-ui实现表格checkbox单选

    公司平台利用vue+elementui搭建前端页面,因为本人第一次使用vue也遇到了不少坑,因为我要实现的效果如下图所示 实现这种单选框,只能选择一个,但element-ui展示的是多选框,check ...

  8. vue 导出excel表格

    对于涉及到数据比较多的管理后台导出excel 表格这个需求就非常的常见了 所以? vue 怎么到处excel表格的? 有两种办法 1:请求接口后台直接给你的是excel文件,你需要做的就是怎么接收ex ...

  9. 应用五：Vue之ElementUI 表格Table与分页Pagination组件化

    (注:本文适用于有一定Vue基础或开发经验的读者,文章就知识点的讲解不一定全面,但却是开发过程中很实用的) 在平时的web项目开发过程中,列表分页查询展示应用的很频繁,为了便于阅读并减少代码的冗余,所 ...

随机推荐

  1. error MSB8008: 指定的平台工具集(v110)未安装或无效

    转自VC错误:http://www.vcerror.com/?p=318 问题描述: 平台工具集(v110)是vs2012下用的,你是用vs2010打开工程,它默认是用v100, 所以这个工程可能用v ...

  2. 如何设置Windows操作系统打印机与xlpd连接

    Xlpd是Xmanager中负责远程打印的软件,除了打印远程文件,它还具备很多功能,本集将具体讲解Xlpd的主要功能. 主要功能如下: 1.  支持LPD协议(RFC1179) 在RFC1179中定义 ...

  3. spring boot 尚桂谷学习笔记05 ---Web

    ------web 开发登录功能------ 修改login.html文件:注意加粗部分为 msg 字符串不为空时候 才进行显示 <!DOCTYPE html> <!-- saved ...

  4. 网络命令-nc（二）

    继续Netcat 这个命令吧 1:远程拷贝文件 在本地输出 文件debian.img 到 192.168.5.40 主机12345端口监听 nc -v 192.168.5.40 12345 < ...

  5. Mr. Panda and Crystal(最短路+完全背包)

    http://codeforces.com/gym/101206/attachments 题意: T组输入,每组给出m,n,k,m为能量总数,n为水晶种类数,k为合成方案数.有的水晶可以用能量制造,有 ...

  6. 迪杰斯特拉算法（Dijkstra）

    模板一: 时间复杂度O(n2) int dijkstra(int s,int m) //s为起点,m为终点 { memset(dist,,sizeof(dist)); //初始化,dist数组用来储存 ...

  7. 为什么tcp-wrappers被Redhat Centos Fedora废弃？

    1 简述 TCP wrappers is a simple tool to block incoming connection on application level. This was very ...

  8. C++中函数模板的深入理解

    1,函数模板深入理解: 1,编译器从函数模板通过具体类型产生不同的函数: 1,模板就是模子,通过这个模子可以产生很多的实物: 2,函数模板就是编译器用来产生具体函数的模子: 2,编译器会对函数模板进行 ...

  9. for循环（C语言型）举例

  10. go语言从例子开始之Example5.for循环

    for 是 Go 中唯一的循环结构.这里有 for 循环的三个基本使用方式. package main import "fmt" func main() { 最常用的方式,带单个循 ...