文享日志

Vue指令综合运用的实例

Vue.js JavaScript

发表于2018年05月27日11:10:06

0条评论 134次阅读

首先看下面的任务图:

999884352710119424.jpg

要求:输入用户信息,点击“创建新用户”后,在底下面板中可以显示。点击“删除”,删除用户信息。


思路:

第一步、点击“创建新用户”,我们怎么将输入面板中的数据获取?这里很容易想到v-model属性,该属性将vue实例中的数据与页面数据进行双向绑定,我们在要获取值的标签中,加入v-model属性,并将其与vue实例中data中属性对应即可。当点击“创建新用户”,输入面板中的值就保存在vue实例中。


第二步、vue实例中的值,怎么显示到面板中?观察面板,很容易想到v-for指令,使用v-for指令,遍历用户数组总的用户数据,即可将所有用户渲染到页面上。


第三步、怎么实现“删除”功能?那我们回头想想,Vue是由数据驱动的,我改变相应的数据,vue替我们完成必要的渲染。所以这里我们只需要将用户数组中,对应的项删除,vue替我们完成页面上数据的更新。



代码部分实现:


<div id="app">

<fieldset>

    <legend>用户输入系统legend>

    <label for="username">姓名:label>

    <input type="text" name="username" id="username" v-model="user.name">

<br>

    <label for="age">年龄:label>

    <input type="text" name="age" id="age" v-model="user.age">

<br>

    <label for="sex">性别:label>

    <select name="sex" id="sex" v-model="user.sex">

        <option value="男" selected>option>

        <option value="女">option>

    select>

<br>

    <label for="phone">手机:label>

    <input type="number" name="phone" id="phone" v-model="user.phone">

<br>

    <button @click="useradd">创建新用户button>

fieldset>


<table style="width:400px">

<tbody>

    <tr>

        <td>姓名td>

        <td>年龄td>

        <td>性别td>

        <td>手机td>

        <td>删除td>

    tr>

    <tr v-for="(item,idx) in users">

        <td>{{item.name}}td>

        <td>{{item.age}}td>

        <td>{{item.sex}}td>

        <td>{{item.phone}}td>

    <td>

        <button @click="userdel(idx)">删除button>

    td>

    tr>

tbody>

table>



let vm = new Vue({
    el: '#app',
    data: {
        users: [],
        user: {
            name: "",
            age: "",
            sex: "男",
            phone: ""
        }
    },
    methods: {
        useradd() {
            this.users.unshift(this.user);
            this.user = {
                name: "",
                age: "",
                sex: "男",
                phone: ""
            }
        },
        userdel(idx) {
            this.users.splice(idx, 1);
        }
    }
})


👍 0  👎 0
共有0条评论

发表新评论

提交

广告展示

腾讯云推广 阿里云推广