2. 程式人生 > 其它 >Vue學習筆記之表單繫結

Vue學習筆記之表單繫結

阿新 • • 發佈：2022-03-17

1. 概述

1.1. 什麼是資料的雙向繫結

Vue.js是一個MV VM框架， 即資料雙向繫結， 即當資料發生變化的時候， 檢視也就發生變化， 當檢視發生變化的時候，資料也會跟著同步變化。這也算是Vue.js的精髓之處了。   值得注意的是，我們所說的資料雙向繫結，一定是對於UI控制元件來說的非UI控制元件不會涉及到資料雙向繫結。單向資料繫結是使用狀態管理工具的前提。如果我們使用vue x那麼資料流也是單項的，這時就會和雙向資料繫結有衝突。

1.2. 為什麼要實現資料的雙向繫結

在Vue.js中，如果使用vuex， 實際上資料還是單向的， 之所以說是資料雙向繫結，這是用的UI控制元件來說， 對於我們處理表單， Vue.js的雙向資料繫結用起來就特別舒服了。即兩者並不互斥，在全域性性資料流使用單項，方便跟蹤；區域性性資料流使用雙向，簡單易操作。

2. 在表單中使用雙向資料繫結

你可以用v-model指令在表單、及元素上建立雙向資料繫結。它會根據控制元件型別自動選取正確的方法來更新元素。儘管有些神奇， 但v-model本質上不過是語法糖。它負責監聽使用者的輸入事件以更新資料，並對一些極端場景進行一些特殊處理。   注意：v-model會忽略所有表單元素的value、checked、selected特性的初始值而總是將Vue例項的資料作為資料來源。你應該通過JavaScript在元件的data選項中宣告初始值

2.1. 單行文字

主要程式碼：

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

完整程式碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表單繫結</title>
		<!-- 開發環境版本，包含了有幫助的命令列警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input v-model="message" placeholder="edit me">
			<p>Message is: {{ message }}</p>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el:"#app",
				data:{
					message:''
				}
				
			})
		</script>
	</body>
</html>

實現效果:

2.2. 多行文字

主要程式碼：

<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>

完整程式碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表單繫結</title>
		<!-- 開發環境版本，包含了有幫助的命令列警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<span>Multiline message is:</span>
			<p style="white-space: pre-line;">{{ message }}</p>
			<br>
			<textarea v-model="message" placeholder="add multiple lines"></textarea>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: "#app",
				data: {
					message: ''
				}

			})
		</script>
	</body>
</html>

實現效果:

2.3. 單複選框

主要程式碼：

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

完整程式碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表單繫結</title>
		<!-- 開發環境版本，包含了有幫助的命令列警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="checkbox" id="checkbox" v-model="checked">
			<label for="checkbox">{{ checked }}</label>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: "#app",
				data: {
					checked: false
				}

			})
		</script>
	</body>
</html>

實現效果:

2.4. 多複選框

多個複選框，繫結到同一個陣列：
主要程式碼：

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>

完整程式碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表單繫結</title>
		<!-- 開發環境版本，包含了有幫助的命令列警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
			<label for="jack">Jack</label>
			<input type="checkbox" id="john" value="John" v-model="checkedNames">
			<label for="john">John</label>
			<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
			<label for="mike">Mike</label>
			<br>
			<span>Checked names: {{ checkedNames }}</span>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: "#app",
				data: {
					checkedNames: []
				}

			})
		</script>
	</body>
</html>

實現效果:

2.5. 單選按鈕

主要程式碼：

<div id="example-4">
  <input type="radio" id="one" value="One" v-model="picked">
  <label for="one">One</label>
  <br>
  <input type="radio" id="two" value="Two" v-model="picked">
  <label for="two">Two</label>
  <br>
  <span>Picked: {{ picked }}</span>
</div>

完整程式碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表單繫結</title>
		<!-- 開發環境版本，包含了有幫助的命令列警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div id="example-4">
				<input type="radio" id="one" value="One" v-model="picked">
				<label for="one">One</label>
				<br>
				<input type="radio" id="two" value="Two" v-model="picked">
				<label for="two">Two</label>
				<br>
				<span>Picked: {{ picked }}</span>
			</div>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: "#app",
				data: {
					picked: ''
				}

			})
		</script>
	</body>
</html>

實現效果:

2.6. 下拉框

主要程式碼：

<div id="example-5">
  <select v-model="selected">
    <option disabled value="">請選擇</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>

完整程式碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表單繫結</title>
		<!-- 開發環境版本，包含了有幫助的命令列警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div id="example-5">
				<select v-model="selected">
					<option disabled value="">請選擇</option>
					<option>A</option>
					<option>B</option>
					<option>C</option>
				</select>
				<span>Selected: {{ selected }}</span>
			</div>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: "#app",
				data: {
					selected: ''
				}

			})
		</script>
	</body>
</html>

實現效果:

2.7. 多選框

主要程式碼：

<div id="example-6">
  <select v-model="selected" multiple style="width: 50px;">
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <br>
  <span>Selected: {{ selected }}</span>
</div>

完整程式碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表單繫結</title>
		<!-- 開發環境版本，包含了有幫助的命令列警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div id="example-6">
				<select v-model="selected" multiple style="width: 50px;">
					<option>A</option>
					<option>B</option>
					<option>C</option>
				</select>
				<br>
				<span>Selected: {{ selected }}</span>
			</div>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: "#app",
				data: {
					selected: []
				}

			})
		</script>
	</body>
</html>

實現效果:

3. 參考資料

[1]表單輸入繫結 — Vue.js 中文文件

[2]Vue課堂筆記/04表單雙綁、元件.md · 盧澤華/Vue - 碼雲 - 開源中國

相關推薦

Vue學習筆記之表單繫結

1. 概述 1.1. 什麼是資料的雙向繫結 Vue.js是一個MV VM框架， 即資料雙向繫結， 即當資料發生變化的時候， 檢視也就發生變化， 當檢視發生變化的時候，資料也會跟著同步變化。這也算是Vue.js的精髓之處了。   值得

vue學習筆記之給元件繫結原生事件操作示例

本文例項講述了vue學習筆記之給元件繫結原生事件操作。分享給大家供大家參考，具體如下：

Python GUI程式設計學習筆記之tkinter事件繫結操作詳解

本文例項講述了Python GUI程式設計學習筆記之tkinter事件繫結操作。分享給大家供大家參考，具體如下：

php學習筆記之表單

各種表單 1.下拉選單單選 <form action=\"\" method=\"get\"> <select name=\"q\"> <option value=\"\">選擇一個站點:</option>

Vue學習筆記2--類樣式繫結和內建指令v-xxx

Class和Style繫結 class繫結 放置物件（常用） :class=\"{類名:布林}\" <!-- 第一種 放置字串-->

VUE學習六，表單和應用雙向繫結v-model

Vue 還提供了v-model指令，它能輕鬆實現表單輸入和應用狀態之間的雙向繫結。

詳解vue 表單繫結與元件

一、什麼是雙向資料繫結 vue.js是一個MV VM框架， 即資料雙向繫結， 即當資料發生變化的時候， 檢視也就發程式設計客棧生變化， 當檢視發生變化的時候，資料也會跟著同步變化。這也算是Vue.js的精髓之處了。

laravel框架學習記錄之表單操作詳解

本文例項講述了laravel框架學習記錄之表單操作。分享給大家供大家參考，具體如下：

vue學習筆記之slot插槽基本用法例項分析

本文例項講述了vue學習筆記之slot插槽基本用法。分享給大家供大家參考，具體如下：

vue學習筆記之過濾器的基本使用方法例項分析

本文例項講述了vue學習筆記之過濾器的基本使用方法。分享給大家供大家參考，具體如下：

vue學習筆記之作用域插槽例項分析

本文例項講述了vue學習筆記之作用域插槽。分享給大家供大家參考，具體如下：

vue學習筆記之動態元件和v-once指令簡單示例

本文例項講述了vue動態元件和v-once指令。分享給大家供大家參考，具體如下：

vue學習筆記之slot插槽用法例項分析

本文例項講述了vue slot插槽用法。分享給大家供大家參考，具體如下： 不使用插槽，在template中用v-html解析父元件傳來的帶有標籤的content

vue學習筆記之Vue中css動畫原理簡單示例

本文例項講述了Vue中css動畫原理。分享給大家供大家參考，具體如下： 當transition包裹了一個元素之後，vue會自動分析元素的css樣式，構建動畫流程。

表單繫結v-model

表單控制元件在實際開發中是極為常見的。特別是對於使用者資訊的提交，需要大量的表單。Vue中使用v-model指令來實現表單元素和資料的雙向繫結。此篇記錄下其原理，以及當時學習時候的一些小嚐試以及修飾符。

Vuejs學習筆記(一)-8.動態繫結style屬性

v-bind:style用途：動態繫結一些CSS內聯樣式。 demo1（物件語法）: 1.寫CSS屬性名方式1，如fone-size，要以駝峰方式寫：fontSize

vue學習筆記之父元件子元件的傳值

一 在前端開發過程中，很多情況下一個頁面無法裝載大部分的程式碼，所以需要子元件來完成父元件的任務，下面我來展示一下，元件之間如何進行傳值以及常見的坑，首先上程式碼

vue學習-05-class與style繫結(未完）

vue學習-05-class與style繫結(未完） 繫結class v-bind:class不但可以設定class屬性，還可以和元素本身的class共存

Vue學習筆記之Hello Vue

1. 引言 Vue (讀音 /vjuː/，類似於 view) 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專

Vue學習筆記之Vue-Router

1. 概述 Vue Router 是 Vue.js 的官方路由。它與 Vue.js 核心深度整合，讓用 Vue.js 構建單頁應用變得輕而易舉。功能包括：