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. php中class类文件引入方法汇总

    在项目中  总是会用到类文件引入的操作,在此简单总结下: 方法一: 使用  include,require,include_once,require_once. 其中:*_once  once意为曾经 ...

  2. 同源策略和跨域资源共享（CROS）

    同源策略 Same-origin policy - Web security | MDN 跨站资源共享 Cross-Origin Resource Sharing (CORS) - HTTP | MD ...

  3. PHP+JS的信息提示弹窗

    基于PHP函数的Msg信息提示框 1.可以设置弹出信息,跳转地址,跳转的时间,跳转的信息标题提示: 2.代码实例: <?php function ShowMsg($msg, $gourl,$ti ...

  4. 从0开始的InfiniBand硬件踩坑过程

    由于科学计算实验的需求,需要使用InfiniBand做一个持久性内存全互联的分布式存储系统.其中从网卡到交换机使用Mellanox全家桶,而在Mellanox网卡与交换机的使用过程中还是遇到了不少的问 ...

  5. DOM选择器

    DOM选择器分为:id.class.name.tagname.高级.关系选择器;(返回的都是标签) 一:元素节点选择器: 1. id: 返回的是单个对象 <body> <div cl ...

  6. multiprocessing的Process类的简单使用

    ''' 跨平台的进程创建模块(multiprocessing) 支持跨平台 :window/linux multiprocessing提供一个Process类来代表一个进程对象 ''' from mu ...

  7. Cocos2d-x之Sprite

    |   版权声明:本文为博主原创文章,未经博主允许不得转载. Sprite是Cocos2d-x游戏开发者最常用的类,用图片把精灵(Sprite)显示在屏幕上. 在游戏开发中,经常会遇到精灵(Sprit ...

  8. python3-三个demo带你入门装饰器

    装饰器入门 在不修改程序源代码和程序调用方式的情况下,扩展程序功能时不得不用到装饰器. python中的装饰器可谓功能强大,强大到刚接触它就被它弄得措手不及. 但是,静下心来好好研究,那可是回味无穷. ...

  9. JavaScript Set

    function Set() { var items = {}; this.has = function(value) { return value in items } this.add = fun ...

  10. Ubuntu下安装chrome浏览器步骤

    进入 Ubuntu 18.04 桌面,按下 Ctrl + Alt + t 键盘组合键,启动终端. 也可以按下 Win 键(或叫 Super 键),在 Dash 的搜索框中输入 terminal 或“终 ...