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. 嵌入式C语言3.4 关键字---类型描述符auto/register/static/const/extern/volatile/

    对内存资源存放位置的限定 1. auto 默认值---分配的内存都是可读可写的区域 auto int a; 区域如果出现 {} 我们认为在栈空间 2. register register int a; ...

  2. nginx 日志统计接口每个小时访问量

    指定时间段增量统计nginx日志不同接口的访问量: #!/bin/bash#此脚本用于统计nginx日志当前时间15分钟之内不同接口(URL)的访问量统计LOG=/usr/local/nginx/lo ...

  3. SSL certificate problem: self signed certificate

    执行Git命令时出现各种 SSL certificate problem 的解决办法 2014年10月11日 10:45:40   比如我在windows下用git clone gitURL 就提示  ...

  4. Python 学习笔记14 类 - 使用类和实例

    当我们熟悉和掌握了怎么样创建类和实例以后,我们编程中的大多数工作都讲关注在类的简历和实例对象使用,修改和维护上. 结合实例我们来进一步的学习类和实例的使用: 我们新建一个汽车的类: #-*- codi ...

  5. c# .netframwork 4.0 调用 2.0时报错 混合模式程序集是针对“v2.0.50727”版的运行时生成的，在没有配置其他信息的情况下，无法在 4.0 运行时中加载该程序集。

    “System.IO.FileLoadException”类型的未经处理的异常在 XXX.dll 中发生 其他信息: 混合模式程序集是针对“v2.0.50727”版的运行时生成的,在没有配置其他信息的 ...

  6. JAVA编程思想(1) - 一切都是对象

     -"假设我们说还有一种不用的语言,那么我们就会发觉一个有些不同的世界" 1. 用引用操纵对象        每种编程语言都有自己的数据处理方式. 有些时候,程序猿必须时刻留意准备 ...

  7. Asp.net core 使用log4net作为日志组件，记录日志到本地。

    原文:Asp.net core 使用log4net作为日志组件,记录日志到本地. GitHub demo :https://github.com/zhanglilong23/Asp.NetCore.D ...

  8. linux的CentOS、Ubuntu、Debian三个比较异同

    Linux有非常多的发行版本,从性质上划分,大体分为由商业公司维护的商业版本与由开源社区维护的免费发行版本.商业版本以Redhat为代表,开源社区版本则以debian为代表.这些版本各有不同的特点,在 ...

  9. ubuntu16.04安装LNMP（ubuntu+Nginx+mysql+PHP7.0）

    系统环境: Ubuntu 16.04.2 LTS nginx version: nginx/1.10.3 (Ubuntu) PHP 7.0.22-0ubuntu0.16.04.1 mysql  Ver ...

  10. UML 简介

    虚线箭头指向依赖: 实线箭头指向关联: 虚线三角指向接口: 实线三角指向父类: 空心菱形能分离而独立存在,是聚合: 实心菱形精密关联不可分,是组合: