vue iframe 中写script_使用Vue快速展示历史记录

前言

最近使用vue做了一个历史记录界面，动态赋值的简便性令我陶醉。读完本文您将了解v-for循环，v-text赋值和{{}}赋值，v-if判断和:class=“{a：b}”动态绑定 

编程工具：VisualStudio2017

目录

1. 接口编写固定数据

2. Js中写请求

3. 页面元素的动态赋值

4. 实现效果图

1.接口编写固定数据

后端代码写在了flip.ashx一般处理程序中。数据全部写成固定的，在后台拼接好，等待前台的请求调用。

try{    if (context.Request.Params["Action"] != null)    {        switch (context.Request.Params["Action"])        {            case "GetHisData":                strmsg = GetHisData();                break;            default:                strmsg = "传入参数有误";                break;        }    }}catch (Exception e){}/// /// 获取历史记录/// /// private string GetHisData(){    string returnOut = "";    returnOut += "{";    returnOut += "    \"code\": \"10000\",";    returnOut += "    \"msg\": \"SUCCESS\",";    returnOut += "    \"data\": [";    returnOut += "        {";    returnOut += "            \"name\": \"张三\",";    returnOut += "            \"phone\": \"12345678912\",";    returnOut += "            \"bmsj\": \"2020-07-17 10:10\",";    returnOut += "            \"state\": \"报名中\",";    returnOut += "            \"tgr\": \"\",";    returnOut += "            \"tgsj\": \"1900-01-01 00:00\",";    returnOut += "            \"bhr\": \"\",";    returnOut += "            \"bhsj\": \"1900-01-01 00:00\",";    returnOut += "            \"bhly\": \"\"";    returnOut += "        },";    returnOut += "        {";    returnOut += "            \"name\": \"李四\",";    returnOut += "            \"phone\": \"12345678912\",";    returnOut += "            \"bmsj\": \"2020-07-17 18:08\",";    returnOut += "            \"state\": \"已通过\",";    returnOut += "            \"tgr\": \"监督管\",";    returnOut += "            \"tgsj\": \"2020-07-17 20:08\",";    returnOut += "            \"bhr\": \"\",";    returnOut += "            \"bhsj\": \"1900-01-01 00:00\",";    returnOut += "            \"bhly\": \"\"";    returnOut += "        },";    returnOut += "        {";    returnOut += "            \"name\": \"王五\",";    returnOut += "            \"phone\": \"12345678912\",";    returnOut += "            \"bmsj\": \"2020-07-17 11:11\",";    returnOut += "            \"state\": \"已驳回\",";    returnOut += "            \"tgr\": \"\",";    returnOut += "            \"tgsj\": \"1900-01-01 00:00\",";    returnOut += "            \"bhr\": \"监督管\",";    returnOut += "            \"bhsj\": \"2020-07-17 12:11\",";    returnOut += "            \"bhly\": \"人数已满哦\"";    returnOut += "        }";    returnOut += "    ]";    returnOut += "}";    return returnOut;}

2.Js中写请求

以下是js的写法，向后端请求，返回数据。

<script>    var vm = new Vue({        el: ".repair_group",        data: {            recordList: [],//历史记录            recordLength: '',//记录条数        },        mounted: function () {            Vue.nextTick(function () {                vm.getListData();//请求所有列表            })        },        methods: {            getListData: function () {                // 请求记录列表                $.ajax({                    url: '../Interface/flip.ashx',                    type: 'POST',                    data: {                        Action: 'GetHisData',                    },                    success: function (data) {                             var dataList = JSON.parse(data);                        if (dataList.code == '10000') {                            vm.recordList = dataList.data;                            vm.recordLength = dataList.data.length;                        }                    },                    error: function (data) {                    }                })            }        }    })script>

3.页面元素的动态赋值

以下是html页面的元素，涉及到vue的一些基本语法。v-for循环，v-text赋值和{{}}赋值，v-if判断和:class=“{a:b}” 动态绑定。

v-for相当于for循环，可以循环赋值

v-text和{{}}相当于赋值，效果差不多 

v-if判断，若是满足条件，则显示这一行数据 

:class=“{a：b}”，a的存在取决于b,若b为true说明a存在，若b为false，则说明a不存在

<div class="repair_group activity_record" v-cloak>    <span class="count" v-if="recordLength>0">共计<span v-text="recordLength">0span>条记录span>    <ul>        <li v-for="item in recordList">            <div class="row">                <span v-text="item.bmsj">span>                <span class="time"><i :class="{red:item.state=='已驳回',orange:item.state=='报名中',green:item.state=='已通过'}">{{item.state}}i>span>            div>            <div class="part">                <div class="msg-item"><i>报名人：i><span v-text="item.name">span>div>                <div class="msg-item"><i>电话：i><span v-text="item.phone">span>div>                <div class="msg-item"><i>报名时间：i><span v-text="item.bmsj">span>div>                <div class="msg-item" v-if="item.state=='已通过'"><i class="">通过人：i><span v-text="item.tgr">span>div>                <div class="msg-item" v-if="item.state=='已通过'"><i class="">通过时间：i><span v-text="item.tgsj">span>div>                <div class="msg-item" v-if="item.state=='已驳回'"><i class="">驳回人：i><span v-text="item.bhr">span>div>                <div class="msg-item" v-if="item.state=='已驳回'"><i class="">驳回时间：i><span v-text="item.bhsj">span>div>                <div class="msg-item" v-if="item.state=='已驳回'"><i class="">驳回理由：i><span v-text="item.bhly">span>div>            div>        li>    ul>    <div class="noRecord" v-if="recordLength<1">暂无报名记录！div>div>

4.效果图

以下是报名状态的颜色样式

.red {    color: #dd524d;}.green {    color: #09c267;}.orange {    color: #ff7043;}

和html中的：class配套使用。

:class="{red:item.state=='已驳回',orange:item.state=='报名中',green:item.state=='已通过'}"

当state的值是已驳回，那这个class的值为red，在style中有.red赋颜色。

最后加上各种样式，效果如下图