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. 至强E3-1200 系列部分参数

    1155 Xeon E3-1275V2(E1) Ivy Bridge 3.5GHz BLK 100MHz 8MB 77W All 1155* Xeon E3-1270V2(E1) Ivy Bridge ...

  2. Linux查看文件大小5个常用命令

    1. 前言 Linux 系统有非常好用的命令,功能也非常丰富,如果你对命令行工具熟悉,可以非常高效率完成维护工具.本文主要介绍Linux系统中,用于查看文件大小的命令. Linux 查看文件大小5个常 ...

  3. Html5 学习笔记 --》css3 学习

    在开发任务中最好不要使用前缀 可以设置发散图形 圆形 方形等 边框图片效果: CSS3 变形效果: Css3 3D立体变形: css 设置 CSS3 过度效果: div:hover { backgro ...

  4. HTML的head头和标题

    HTML中Head头 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  5. docker 实战

    创建镜像 docker pull ubuntu 创建容器 docker run -it -name web ubuntu /bin/bash 更新软件源信息 apt-get update 安装ssh  ...

  6. go module管理依赖包

    go mod 最大的好处就是摆脱了GOPATH这个限制,在除了GOPATH以外的目录下也能开展你的项目 go mod使用: 1,确保你的go版本是1.1以上 2,创建一个项目目录example,并添加 ...

  7. go 学习之字符串

    字符串 字符串是不可变值类型,内部⽤用指针指向 UTF-8 字节数组.默认值是空字符串 "".用索引号访问某字节,如 s[i], i不能是负数.不能⽤用序号获取字节元素指针,&am ...

  8. Compile Linux Kernel on Ubuntu 12.04 LTS (Detailed)

    This tutorial will outline the process to compile your own kernel for Ubuntu. It will demonstrate bo ...

  9. MVC的实体模型写在类库，为什么被其他类库调用时，用不了模型的表？

    一,很简单,由于第一次添加实体模型时,VS会自动帮你添加引用System.Data.Entity到当前类库,如下图示: 二,而手动添加的类库并不存在这个引用,则及时你引用了当前的实体模型的类库,却使用 ...

  10. Groovy学习：第一章 用Groovy简化Java代码

    1. Groovy的安装 目前Groovy的最新版本为2.1.2版,下载地址为:http://groovy.codehaus.org/Download下载后解压groovy-binary-2.1.2. ...