1. 概述
老話說的好：行動起來，原地觀望是沒有用的。
言歸正傳，今天我們來聊聊 VUE3 的 表單元素。
2. 表單元素
2.1 文本框與數(shù)據(jù)綁定
<body>
<div id="myDiv"></div>
</body>
<script>
const app = Vue.createApp({ // 創(chuàng)建一個vue應用實例
data() {
return {
message: "hello",}
},
methods : {
getMessage() {
console.info(this.message)
},
},
template : `
<div>
<input v-model="message" />
<button @click="getMessage">獲取文本內(nèi)容</button>
</div>
`
});
// vm 就是vue應用的根組件
const vm = app.mount('#myDiv'); // 綁定id為 myDiv 的元素
使用 v-model 將文本框與數(shù)據(jù) message 關聯(lián)
image.png
2.2 多行文本與數(shù)據(jù)綁定
const app = Vue.createApp({ // 創(chuàng)建一個vue應用實例
data() {
return {
message: "hello",
}
},
methods : {
getMessage() {
console.info(this.message)
},
},
template : `
<div>
<textarea v-model="message" /><br>
<button @click="getMessage">獲取文本內(nèi)容</button>
</div>
`
與文本框相同，同樣使用 v-model 與數(shù)據(jù) message 綁定
image.png
2.3 單個 checkbox 與數(shù)據(jù)綁定
const app = Vue.createApp({ // 創(chuàng)建一個vue應用實例
data() {
return {
checkboxFlag: true,
},
methods : {
getCheckboxFlag() {
console.info(this.checkboxFlag)
},
},
template : `
<div>
<input type="checkbox" v-model="checkboxFlag" />checkbox<br>
<button @click="getCheckboxFlag">獲取checkbox設置</button>
</div>
`
當 checkbox 被選中，值是 true，否則值是 false
image.png
2.4 自定義單個 checkbox 的值
const app = Vue.createApp({ // 創(chuàng)建一個vue應用實例
data() {
return {
checkboxFlag2: "選中",
}
},
methods : {
getCheckboxFlag2() {
console.info(this.checkboxFlag2)
},
},
template : `
<div>
<input type="checkbox" v-model="checkboxFlag2" true-value="選中" false-value="未選中" />checkbox<br>
<button @click="getCheckboxFlag2">獲取checkbox設置</button>
</div>
`
使用 true-value 和 false-value 自定義 checkbox 的值
image.png
2.5 一組 checkbox 與數(shù)據(jù)綁定
const app = Vue.createApp({ // 創(chuàng)建一個vue應用實例
data() {
return {
checkboxArr: [],
}
},
methods : {
getCheckboxArr() {
console.info(this.checkboxArr)
},
},
template : `
<div>
<input type="checkbox" v-model="checkboxArr" value="football" />足球<br>
<input type="checkbox" v-model="checkboxArr" value="basketball" />籃球<br>
<input type="checkbox" v-model="checkboxArr" value="tableTennis" />乒乓球<br>
<button @click="getCheckboxArr">獲取checkbox設置</button>
</div>
`
一組 checkbox 與同一個數(shù)據(jù) checkboxArr 綁定，得到的結(jié)果是一個數(shù)組
image.png
2.6 一組 radio 與數(shù)據(jù)綁定
const app = Vue.createApp({ // 創(chuàng)建一個vue應用實例
data() {
return {
radioValue: "tableTennis",
}
},
methods : {
getRadioValue() {
console.info(this.radioValue)
},
},
template : `
<div>
<input type="radio" v-model="radioValue" value="football" />足球<br>
<input type="radio" v-model="radioValue" value="basketball" />籃球<br>
<input type="radio" v-model="radioValue" value="tableTennis" />乒乓球<br>
<button @click="getRadioValue">獲取radio設置</button>
</div>
`
radio 是單選，因此得到的值是一個 字符串
image.png
2.7 select 與數(shù)據(jù)綁定
const app = Vue.createApp({ // 創(chuàng)建一個vue應用實例
data() {
return {
selectValue: "",
}
},
methods : {
getSelectValue() {
console.info(this.selectValue)
},
},
template : `
<div>
<select v-model="selectValue">
<option value="football">足球</option>
<option value="basketball">籃球</option>
<option value="tableTennis">乒乓球</option>
</select>
<br>
<button @click="getSelectValue">獲取select設置</button>
</div>
`
在 select 標簽上使用 v-model 綁定數(shù)據(jù) selectValue
image.png
2.8 select 的選項從數(shù)據(jù)獲得
const app = Vue.createApp({ // 創(chuàng)建一個vue應用實例
data() {
return {
selectOptionArr: [
{text: "足球", value: "football"},
{text: "籃球", value: "basketball"},
{text: "乒乓球", value: "tableTennis"}
],
}
},
methods : {
getSelectValue() {
console.info(this.selectValue)
},
},
template : `
<div>
<select v-model="selectValue">
<option v-for="item in selectOptionArr" :value="item.value">{{item.text}}</option>
</select>
<br>
<button @click="getSelectValue">獲取select設置</button>
</div>
`
使用 v-for 得到 option 元素
image.png
2.9 select 的返回對象
const app = Vue.createApp({ // 創(chuàng)建一個vue應用實例
data() {
return {
selectOptionArr2: [
{text: "足球", value: {name:"football", text:"足球"}},
{text: "籃球", value: {name:"basketball", text:"籃球"}},
{text: "乒乓球", value: {name:"tableTennis", text:"乒乓球"}}
]
}
},
methods : {
getSelectValue() {
console.info(this.selectValue)
},
},
template : `
<div>
<select v-model="selectValue">
<option v-for="item in selectOptionArr2" :value="item.value">{{item.text}}</option>
</select>
<br>
<button @click="getSelectValue">獲取select設置</button>
</div>
`
option 綁定的數(shù)據(jù) selectOptionArr2 中，value 是一個對象。這樣 select 的返回值就是對應的對象。
image.png
2.10 文本框的 number 修飾符
template : `
<div>
{{message}}
<input v-model.number="message" type="number" />
<button @click="getMessage">獲取文本內(nèi)容</button>
</div>
`
在文本框元素中使用 v-model.number ，得到的結(jié)果是一個數(shù)字類型的值，而不是字符串。
2.11 文本框的 trim 修飾符
template : `
<div>
{{message}}
<input v-model.trim="message" />
<button @click="getMessage">獲取文本內(nèi)容</button>
</div>
`
在文本框元素中使用 v-model.trim ，得到的結(jié)果去去掉兩端的空格、Tab、回車等特殊字符。
3. 綜述
今天聊了一下 VUE3 的 表單元素，希望可以對大家的工作有所幫助
歡迎幫忙點贊、評論、轉(zhuǎn)發(fā)、加關注 ：）
關注追風人聊Java，每天更新Java干貨。
