基本信息
源码名称：VUE代码(入门级示例)
源码大小：34.12M
文件格式：.zip
开发语言：C#
更新时间：2019-06-21
   友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

     嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：78630559

本次赞助数额为： 2 元　
   源码介绍 

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>联系人管理</title>
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <script src="~/Scripts/vue.js"></script>
    <script src="~/Scripts/axios.js"></script>
    <style type="text/css">
        table {
            margin: 10px auto auto 10px;
        }
    </style>
</head>
<body>
    <div id="app">
        <table v-show="contactsList.length" class="table-condensed" border="1">
            <thead class="navbar-header">
                <tr>
                    <th>姓名</th>
                    <th>电话号码</th>
                    <th>Email地址</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(contact,index) in contactsList">
                    <td><input type="text" v-model="contact.Name" /></td>
                    <td><input type="text" v-model="contact.PhoneNo" /></td>
                    <td><input type="text" v-model="contact.EmailAddress" /></td>
                    <td>
                        <div v-if="contact.Id!=''">
                            <a href="#" v-on:click="updateContact(contact.Id,contact.Name,contact.PhoneNo,contact.EmailAddress)">修改</a>
                            <a href="#" v-on:click="deleteContactById(contact.Id)">删除</a>
                        </div>
                        <div v-else>
                            <a href="#" v-on:click="addContact(contact.Name,contact.PhoneNo,contact.EmailAddress)">添加</a>
                        </div>
                    </td>
                </tr>
            </thead>
        </table>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                contactsList:[]
            },
            mounted() {
                this.getAllContacts();
            },
            methods: {
                getAllContacts: function () {
                    axios.get('@Url.Action("Get", "Contact")'
                    ).then(
                        (response) => {
                            this.contactsList = [];
                            for (var i = 0; i < response.data.length; i  ) {
                                this.contactsList.push(response.data[i]);
                            }
                            this.contactsList.push({ Id:"", Name: "", PhoneNo: "", EmailAddress: "" });
                        },
                        (response) => {
                            alert(response.status);
                        }
                    ).catch(function (response) {
                        alert(response);
                    });
                },
                addContact: function (name, phoneno, emailaddress) {
                    axios.post('@Url.Action("Add", "Contact")', { contact: { Name: name, PhoneNo: phoneno, EmailAddress: emailaddress } }).then(
                        (response) => {
                            this.contactsList = [];
                            for (var i = 0; i < response.data.length; i  ) {
                                this.contactsList.push(response.data[i]);
                            }
                            this.contactsList.push({ Id: "", Name: "", PhoneNo: "", EmailAddress: "" });
                        },
                        (response) => {
                            alert(response.status);
                        }
                    ).catch(function (response) {
                        alert(response);
                    });
                },
                updateContact: function (id, name, phoneno, emailaddress) {
                    axios.post('@Url.Action("Update", "Contact")', { contact: { Id: id, Name: name, PhoneNo: phoneno, EmailAddress: emailaddress} }).then(
                        (response) => {
                            this.contactsList = [];
                            for (var i = 0; i < response.data.length; i  ) {
                                this.contactsList.push(response.data[i]);
                            }
                            this.contactsList.push({ Id: "", Name: "", PhoneNo: "", EmailAddress: "" });
                        },
                        (response) => {
                            alert(response.status);
                        }
                    ).catch(function (response) {
                        alert(response);
                    });
                },
                deleteContactById: function (id) {
                    axios.post('@Url.Action("Delete", "Contact")', { id: id }).then(
                        (response) => {
                            this.contactsList = [];
                            for (var i = 0; i < response.data.length; i  ) {
                                this.contactsList.push(response.data[i]);
                            }
                            this.contactsList.push({ Id: "", Name: "", PhoneNo: "", EmailAddress: "" });
                        },
                        (response) => {
                            alert(response.status);
                        }
                    ).catch(function (response) {
                        alert(response);
                    });
                }
            }
        });
    </script>
</body>
</html>