v-model的基本使用

v-model的基本使用

例一：

<template>
	<div>
		<h3>v-model</h3>
		<div>
			<input type="text" value="默認值" v-model="firstipt" />
			<p>{{ firstipt }}</p>
		</div>
	</div>
</template>
<script>
	export default{
		name:"vmodeltest",
		data(){
			return{
				firstipt:"",
			}
		}
	}
</script>

<style>


使用v-model可以實現雙向數據綁定，如上代碼和圖片示例，

輸入框默認和p標籤爲空，當輸入框輸入內容時，p標籤在頁面上會自動出現輸入框輸入的內容，

其中v-model可以結合lazy使用，寫成v-model.lazy

這樣寫可以在用戶按回車或者失去焦點時，p標籤纔會被賦予上值，可以減少服務器壓力

例二：v-model和lable的結合使用

<template>
	<div>
		<h3>v-model</h3>
		<div>
			<input id="lableid" type="checkbox" value="默認值" v-model="firstipt" />
			<lable for="lableid">{{firstipt}}</lable>
</div>
	</div>
</template>
<script>
	export default{
		name:"vmodeltest",
		data(){
			return{
				firstipt:true,
			}
		}
	}
</script>
<style>
</style>

選中後
沒選中

例三：v-model.number

<template>
	<div>
		<h3>v-model</h3>
		<div>
			<input id="lableid" type="number" value="默認值" v-model.number="firstipt" />
			<p>{{ firstipt }}</p>
		</div>
	</div>
</template>

<script>
export default{
name:“vmodeltest”,
data(){
return{
firstipt:"",
}
}
}
</script>

使用v-model.number可以讓輸入框只能輸入數字，如果輸入其他類型的值，則輸入框會自動清除

例三：v-model.trim去除首尾空格

<template>
	<div>
		<h3>v-model</h3>
		<div>
			<input type="text" value="默認值" v-model.trim="firstipt" />
			<p>{{ firstipt }}</p>
		</div>
	</div>
</template>
<script>
	export default{
		name:"vmodeltest",
		data(){
			return{
				firstipt:"",
			}
		},
		watch:{
			firstipt(e){
				console.log(e)
			}
		}
	}
</script>

使用trim可以去除輸入框的首尾空格，但不能去除中間的空格

補充，watch:{}是可以對數據進行監聽，例上圖，當輸入框的值改變時，就會打印出結果