第五講、Vue3.x中Dom操作$refs 以及表單結合雙休資料繫結實現線上預約功能

一、Vue3.x中的雙休資料繫結實現人員登記系統

二、Vue3.x Dom操作

1、第一種方法 原生js

<template>
  <h2>人員登記系統</h2>

  <div class="people_list">
    <ul>
      <li>姓名： <input type="text" id="username" /></li>
    </ul>
    <button @click="doSubmit()" class="submit">獲取表單的內容</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "你好",
    };
  },
  methods: {
    doSubmit() {
      var username = document.querySelector("#username");

      alert(username.value);
    },
  },
};
</script>

2、第二種方法 ref獲取dom節點

<template>
<h2>人員登記系統</h2>

<div class="people_list">
    <ul>
        <li>姓名： <input type="text" id="username" /></li>
        <li>年齡： <input type="text" ref="age" /></li>
    </ul>
    <button @click="doSubmit()" class="submit">獲取表單的內容</button>
</div>
</template>

export default {
    data() {
        return {
            message: "你好",
        };
    },
    methods: {
        doSubmit() {
            var username = document.querySelector("#username");
            alert(username.value);

            var ageDom = this.$refs.age;
            alert(ageDom.value);
        },
    },
};

三、Vue3.x雙休資料繫結

MVVM就是我們常說的雙向資料繫結，vue就是一個MVVM的框架。 M 表示model， V view

在MVVM的框架中 model改變會影響檢視view，view檢視改變反過來影響model。

注意：雙休資料繫結主要用於表單中。

<template>
  <h2>人員登記系統</h2>

  <div class="people_list">
    <ul>
      <li>姓名： <input type="text" v-model="peopleInfo.username" /></li>
      <li>年齡： <input type="text" v-model="peopleInfo.age" /></li>
    </ul>
    <button @click="doSubmit()" class="submit">獲取表單的內容</button>
  </div>
</template>

export default {
  data() {
    return {
      peopleInfo: {
        username: "",
        age: "",
      },
    };
  },
  methods: {
    doSubmit() {
      console.log(this.peopleInfo);
    },
  },
};

四、 input、checkbox、radio、select、 textarea中的雙休資料繫結

模板

<template>
<h2>人員登記系統</h2>

<div class="people_list">
    <ul>
        <li>姓 名： <input type="text" v-model="peopleInfo.username" /></li>
        <li>年 齡： <input type="text" v-model="peopleInfo.age" /></li>
        <li>性 別：</li>
        <input type="radio" value="1" id="sex1" v-model="peopleInfo.sex" />
        <label for="sex1">男</label>
        <input type="radio" value="2" id="sex2" v-model="peopleInfo.sex" />
        <label for="sex2">女</label>
        <li>
            城 市：
            <select name="city" id="city" v-model="peopleInfo.city">
                <option v-for="(item, index) in peopleInfo.cityList" :key="index" :value="item">
                    {{ item }}
                </option>
            </select>
        </li>

        <li>
            愛 好：

            <span v-for="(item, index) in peopleInfo.hobby" :key="index">
                <input type="checkbox" :id="'check' + index" v-model="item.checked" />
                <label :for="'check' + key"> {{ item.title }}</label>
                &nbsp;&nbsp;
            </span>
        </li>

        <li>
            備 注：

            <textarea name="mark" id="mark" cols="30" rows="4" v-model="peopleInfo.mark"></textarea>
        </li>

    </ul>

    <button @click="doSubmit()" class="submit">獲取表單的內容</button>
</div>
</template>

業務邏輯：

export default {
    data() {
        return {
            peopleInfo: {
                username: "",
                age: "",
                sex: "2",
                cityList: ["北京", "上海", "深圳"],
                city: "上海",
                hobby: [{
                        title: "吃飯",
                        checked: false,
                    },
                    {
                        title: "睡覺",
                        checked: false,
                    },
                    {
                        title: "敲程式碼",
                        checked: true,
                    },
                ],
                mark: "",
            },
        };
    },
    methods: {
        doSubmit() {
            console.log(this.peopleInfo);
        },
    },
};

css:

ul {
    list-style-type: none;
}

h2 {
    text-align: center;
}

.people_list {
    width: 400px;
    margin: 40px auto;
    padding: 40px;
    border: 1px solid #eee;
}

.people_list li {
    height: 50px;
    line-height: 50px;
}

.form_input {
    width: 300px;
    height: 28px;
}

.submit {
    float: right;
    margin-top: 10px;
}

本作品採用《CC 協議》，轉載必須註明作者和本文連結