Vue3.0中,事件處理用v-on指令,表單輸入綁定則用v-model指令。v-model指令在表單<input>、<textarea> 及 <select> 元素上創建雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。
在HTML標簽中,文本輸入有單行(text)和多行(textarea)輸入。溫馨提醒:v-model 會忽略所有表單元素的value的初始值而總是將當前活動實例的數據作為數據來源。你應該通過 JavaScript 該組件的 data 選項中聲明初始值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue3.0表單綁定</title>
<script src="vue.global.js"></script>
</head>
<body>
<div id="app">
<input v-model="msg" placeholder="單行輸入"/>
<p>單行輸入結果: {{ msg }}</p>
<hr style="background-color: #4CAF50;height: 1px"/>
<textarea v-model="msg2" placeholder="多行輸入"></textarea>
<p>多行輸入結果: {{ msg2 }}</p>
</div>
<script>
Vue.createApp({
data() {
return {
msg: '',
msg2: ''
}
}
}).mount("#app")
</script>
</body>
</html>
輸出結果
在開發產品時,單選按鈕,用于多選一,在選擇性別時常見;單個復選框常在勾選協議中見到;在多個已知選項中,多選一時,可用select。
多個復選框,常在選擇個人興趣愛好等見到。復選框,單選時,綁定到布爾值,多選時,綁定到同一個數組。如果要選擇項很多,那可用多選下拉菜單,以節約布局空間。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue3.0表單綁定</title>
<script src="vue.global.js"></script>
</head>
<body>
<div id="app">
快來,選擇你喜歡的編程語言
<div>
<input type="checkbox" id="Python" value="Python" v-model="likes"/>
<label for="Python">Python</label>
<input type="checkbox" id="Java" value="Java" v-model="likes"/>
<label for="Java">John</label>
<input type="checkbox" id="web" value="前端" v-model="likes"/>
<label for="web">前端</label>
<br/>
<span>你選擇的語言: {{ likes.length > 0 ? likes : '' }}</span>
</div>
<div>
<input type="radio" id="boy" value="程序猿" v-model="gender"/>
<label for="boy">程序猿</label>
<br/>
<input type="radio" id="girl" value="程序媛" v-model="gender"/>
<label for="girl">程序媛</label>
<br/>
<input type="radio" id="no" value="不男不女" v-model="gender"/>
<label for="no">不男不女</label>
<br/>
<span>你是: {{ gender }}</span>
</div>
<div>
<select v-model="selected">
<option disabled value="">你愛帥哥還是美女</option>
<option>帥哥</option>
<option>美女</option>
</select>
<br/>
<span>你愛: {{ selected }}</span>
</div>
<div> 你確定就勾選:<input type="checkbox" id="checkbox" v-model="agree"/>
</div>
<br/>
<div>
<button @keyup.enter="submit" type="submit" @click="submit">
提交</button>
</div>
</div>
<script>
Vue.createApp({
data() {
return {
likes: [],
gender: '',
selected: '',
agree: false
}
},
methods: {
submit() {
if (this.likes.length==0) {
alert('你沒有選擇喜歡的編程語言.')
} else if (this.gender=='') {
alert('性別選擇一下,又會怎么樣呢?')
} else if (this.selected=='') {
alert('沒有選擇你所愛的.')
} else if (this.agree==false) {
alert('勾選協議,才可以提交.')
} else {
alert('恭喜你,數據提交成功!')
}
}
}
}).mount("#app")
</script>
</body>
</html>
輸出結果
好了,有關Vue3.0表單輸入的內容,老陳講完了,如果覺得對你有所幫助,希望老鐵能轉發點贊,讓更多的人看到這篇文章。你的轉發和點贊,就是對老陳繼續創作和分享最大的鼓勵。
一個當了10年技術總監的老家伙,分享多年的編程經驗。想學編程的朋友,可關注:老陳說編程。我在分享Python,前端、Java和App方面的干貨。關注我,沒錯的。
#前端##Vue.js##JavaScript##程序員##Web#
、封裝獲取元素的方法
封裝思想——函數封裝——代碼復用
function get_id(id){
// 這個函數是專門來通過id獲取元素
return document.getElementById(id)
}
function get_els(parentId, tagName){
// 這個函數是專門來獲取某個父標簽范圍內的某些標簽
return get_id(parentId).getElementsByTagName(tagName)
}
二、表單元素屬性
常用的表單元素包括 input、select、textarea、button等,下面我們學習這些表單元素中常用的屬性。
需求:點擊按鈕修改input的類型和內容
html和css代碼
<input type="button" value="按鈕" id="btn">
JavaScript代碼
單標簽
網頁(程序)如果要和用戶產生互動,則必須借助一定的中介,這個中介一般是:文本輸入框、按鈕、多選框、單選框。而表單則是這些中介和放置這些中介的空間(<form action=”” methon=””></form>)。
在網頁中,這些文本輸入框、按鈕等等必須放置在由<form></form>這個標簽所定義的空間中,否則沒有實際意義。所以,由<form></form>標簽所定義的空間就是表單存在的空間。
【各種輸入類型】
呈現結果
姓名:
原始碼
<form action=http://www.baidu.com/nameproject.aspmethon=”post”>
姓名:<input type="text" name="name" size="20">
</form>
它有下列可設定之屬性:
呈現結果
性別:男 女
原始碼
<form>
性別:
男 <input type="radio" name="sex" value="boy">
女 <input type="radio" name="sex" value="girl">
</form>
它有下列可設定之屬性:
呈現結果
喜好: 電影 看書
原始碼
<form>
喜好:
<input type="checkbox" name="sex" value="movie">電影
<input type="checkbox" name="sex" value="book">看書
</form>
它有下列可設定之屬性:
呈現結果
請輸入密碼:
原始碼
<form>
請輸入密碼:<input type="password" name="input">
</form>
它有下列可設定之屬性:
呈現結果
原始碼
<form>
<input type="submit" value="送出資料">
<input type="reset" value="重新填寫">
</form>
它有下列可設定之屬性:
呈現結果
請按下按鈕:
原始碼
<form>
請按下按鈕:<input type="button" name="ok" value="我同意">
</form>
它有下列可設定之屬性:
呈現結果
隱藏欄位:
原始碼
<form>
隱藏欄位:<input type="hidden" name="nosee" value="看不到">
</form>
它有下列可設定之屬性:
【大量文字輸入元件】
呈現結果
請輸入您的意見:
原始碼
<form>
請輸入您的意見:<br>
<textarea name="talk" cols="20" rows="3"></textarea>
</form>
它有下列可設定之屬性:
【下拉式選單】
呈現結果
您喜歡看書嗎?:
非常喜歡
還算喜歡
不太喜歡
非常討厭
原始碼
<form>
您喜歡看書嗎?:
<select name="like">
<option value="非常喜歡">非常喜歡
<option value="還算喜歡">還算喜歡
<option value="不太喜歡">不太喜歡
<option value="非常討厭">非常討厭
</select>
</form>
它有下列可設定之屬性:
multiple,是設定此一欄位為復選,可以一次選好幾個選項。
....................................................................
我的微信公眾號:UI嚴選 —越努力,越幸運
*請認真填寫需求信息,我們會在24小時內與您取得聯系。