5. Vue3.x雙向數據綁定

一、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; }