前言

最近使用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)
{
}

/// <summary>
/// 获取历史记录
/// </summary>
/// <returns></returns>
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">0</span>条记录</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.效果图

以下是报名状态的颜色样式，和html中的：class配套使用。
:class="{red:item.state==‘已驳回’,orange:item.state==‘报名中’,green:item.state==‘已通过’}"
当state的值是已驳回，那这个class的值为red，在style中有.red赋颜色。

.red {
    color: #dd524d;
}

.green {
    color: #09c267;
}

.orange {
    color: #ff7043;
}

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