v-model應用于表單元素
-
常見的表單元素都可以用v-model綁定關聯(lián)→快速獲取或設置
-
表單元素的值它會根據(jù)控件類型自動選取正確的方法來更新元素
常見的表單元素：
文章來源：http://www.zghlxwxcb.cn/news/detail-708730.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-708730.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
textarea {
display: block;
width: 240px;
height: 100px;
margin: 10px 0;
}
</style>
</head>
<body>
<div id="app">
<h3>學習網(wǎng)</h3>
姓名：
<input type="text" v-model="username">
<br><br>
是否單身：
<input type="checkbox" v-model="isSingle">
<br><br>
<!--
前置理解：
1. name: 給單選框加上 name 屬性 可以分組 → 同一組互相會互斥
2. value: 給單選框加上 value 屬性，用于提交給后臺的數(shù)據(jù)
結合 Vue 使用 → v-model
-->
性別:
<input type="radio" value="1" name="gender" v-model="gender">男
<input type="radio" value="2" name="gender" v-model="gender">女
<br><br>
<!--
前置理解：
1. option 需要設置 value 值，提交給后臺
2. select 的 value 值，關聯(lián)了選中的 option 的 value 值
結合 Vue 使用 → v-model
-->
所在城市:
<select v-model="city">
<option value="101">北京</option>
<option value="102">上海</option>
<option value="103">成都</option>
<option value="104">南京</option>
</select>
<br><br>
自我描述：
<textarea v-model="description"></textarea>
<button>立即注冊</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
username: 0,
isSingle: false,
gender: 1,
city: 101,
description: "",
}
})
</script>
</body>
</html>
到了這里，關于vue中v-model應用于表單元素的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
