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. (63)C# 不安全代码unsafe

    unsafe fixed stackalloc void*

  2. webapi返回json格式优化 转载https://www.cnblogs.com/GarsonZhang/p/5322747.html

    一.设置webapi返回json格式 在App_Start下的WebApiConfig的注册函数Register中添加下面这代码 1 config.Formatters.Remove(config.F ...

  3. Master Reactor Manager Worker TaskWorker(Task)

    1.Master进程 master进程为主进程,该进程会创建Manager进程和Reactor线程等工作进/线程 swoole的主进程,是个多线程的程序. 主进程内的回调函数: onStart onS ...

  4. oo_project_2java数据类型范围及测试

    数据类型范围测试 一.数字常数的编译问题 java中的常量数字默认以int型编译 如: long a = 1234567890; //十位 long b = 12345678900; //默认数据为i ...

  5. Linux对用户态的动态内存管理

    Linux对内核态内存分配请求与用户态内存分配请求处理上分别对待 Linux本身信任自己,因此Linux内核请求分配多少内存,就会马上分配相同数量的内存出来. 但内核本身不相信应用程序,而且通常应用程 ...

  6. 用swith语句来键入一个整数输出对应是星期几

    基本格式:switch(表达式) { //基本数据类型可以接收byte,short,char,int 引用数据类型可以接收枚举(JDK1.5)String字符串(JDK1.7) case 值1: 语句 ...

  7. Codeforces 1114E(数学+随机算法)

    题面 传送门 分析 通过二分答案,我们显然可以求出数组中最大的数,即等差数列的末项 接着随机取一些数组中的数,对他们两两做差,把得到的差取gcd即为公差 例a={1,5,9,13},我们随机取了1 9 ...

  8. 面相对象编程 扩充之封装、访问机制、 property

    封装: 封装指的是可以将一堆属性和方法,封装到对象中 ps : 对象就好比一个 “袋子/容器”, 可以存放一堆属性和方法 ps : 存不是目的,目的是为了取,可以通过“对象” d的方式获取属性或方法 ...

  9. Windows server 2016远程桌面登录和修改3389端口

  10. 使用雪花算法为分布式下全局ID、订单号等简单解决方案考虑到时钟回拨

    1.snowflake简介         互联网快速发展的今天,分布式应用系统已经见怪不怪,在分布式系统中,我们需要各种各样的ID,既然是ID那么必然是要保证全局唯一,除此之外,不同当业务还需要不同 ...