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. 用.NET做圣诞节音乐盒

    用.NET做圣诞节音乐盒 我曾经用这个程序送给我女朋友(现老婆)

  2. 如何高效地学好R语言?

    如何高效地学好R语言? 学R语言主要在于5点三阶段: 第一阶段有一点:基础的文件操作(read.*, write.*).数据结构知识,认识什么是数据框(data.frame).列表(list).矩阵( ...

  3. java常用排序

    1.冒泡排序 public static int[] bubble(int[] a){ for(int i=0;i<a.length-1;i++){ int tmp=0; for(int j=0 ...

  4. Jenkins构建触发器的区别

    Build periodically:定时进行项目构建或执行(它不care源码是否发生变化),配置如下: 0 2 * * *  (每天2:00 必须build一次源码) 如果是要定时执行脚本,需要选择 ...

  5. upc组队赛14 Floating-Point Hazard【求导】

    Floating-Point Hazard 题目描述 Given the value of low, high you will have to find the value of the follo ...

  6. 垃圾循环li

    function hezhu() { // var lis= $("#aaa").find("treeview"); ////var lis= document ...

  7. 如何取消bootstrap浮动时的padding值

    在bootstrap框架中使用浮动时,可以对元素添加pull-left 或 pull-right 类来达到目的.但是框架会默认给该元素添加一个15px的左右padding. <div class ...

  8. java虚拟机规范(se8)——java虚拟机的编译(四)

    3.12 抛出和处理异常 在程序中使用throw关键字来抛出异常.编译结果很简单. void cantBeZero(int i) throws TestExc { if (i == 0) { thro ...

  9. [unity基础教程]Unity3D实现动态载入游戏资源(转)

    用Unity3D制作基于web的网络游戏,不可避免的会用到一个技术-资源动态载入.比方想载入一个大场景的资源,不应该在游戏的開始让用户长时间等待全部资源的载入完成.应该优先载入用户附近的场景资源.在游 ...

  10. L2Dwidget

    只需要在[页首html代码]中引入L2Dwidget.js即可.<!-- 右下角live2d效果 --> <script src="https://eqcn.ajz.mie ...