vue的v-model的使用

阿新 • • 發佈：2021-07-15

一，v-model是什麼？

<!-- v-model的使用 -->
<input type="text" v-model="msg">
 <h2>{{msg}}</h2>

結果：

輸入了 world

二，作用

Vue中使用v-model指令來實現表單元素和資料的雙向繫結。監聽使用者的輸入，然後更新資料。

因為input中的v-model綁定了msg,所以會實時將輸入的內容傳遞給msg , msg發生改變。
當msg發生改變時,因為上面使用了插值語法將msg的值插入到DOM中,所以DOM會發生響應的改變。所以通過v-model實現了雙向的繫結。

三，原理

v-model本質上是個語法糖，其實現原理包含兩個步驟

通過v-bind繫結一個value屬性
通過v-on指令給當前元素繫結input事件

v-on:input="" 用於動態監聽使用者輸入的資訊，在介面上產生一個事件後，瀏覽器會生成一個event物件，這個event物件就包含了輸入的資訊

四，型別

除了上面的文字型別，v-model還能結合其他型別使用

1. v-model：radio

<div id="app">
    <!--當v-model繫結的是同一個變數，可以不加name屬性來實現radio的互斥-->
    <label for="right">
        <input type="radio" id="right" name="judge" value="對" v-model="judge">對
    </label>
    <label for="wrong">
        <input type="radio" id="wrong" name="judge" value="錯" v-model="judge">錯
    </label>
    <h2>你的判斷是：{{judge}}</h2>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            judge:'對'  //目的：選擇之後將值繫結到judge中
        }
    })
</script>

2. v-model：checkbox

單個複選框

<div id="app">
    <label for="ok">
        <input type="checkbox" id="ok" v-model="isOk">可以
    </label>
    <h4>{{isOk}}</h4>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            isOk:false
        }
    })
</script>

多個複選框

<div id="app">
    <input type="checkbox" value="香蕉" v-model="fruits">香蕉
    <input type="checkbox" value="蘋果" v-model="fruits">蘋果
    <input type="checkbox" value="梨子" v-model="fruits">梨子
    <h4>愛吃的水果是：{{fruits}}</h4>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            fruits:[]
        }
    })
</script>

結果：

3. v-model：select

<div id="app">
    <select name="" id="" v-model="type">
        <option value="電影">電影</option>
        <option value="動漫">動漫</option>
        <option value="電視劇">電視劇</option>
    </select>
    <h4>喜歡的視訊型別是：{{type}}</h4>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            type:'動漫'
        }
    })
</script>

結果：

五，修飾符

1. lazy

v-model在預設情況下同步了輸入框的資料，就是說輸入框資料一有改變，對應的data中的資料就會自動發生改變。lazy修飾符可以讓資料在失去焦點之後才更新

<input type="text" v-model.lazy="msg">

2.number

預設情況下，輸入框得到的資料最後都會變成字串形式。number修飾符可以將輸入框得到的內容轉為數字型別。

<input type="text" v-model.number="msg">

3.trim

trim修飾符可以去掉從輸入框獲取的內容的左右兩邊的空格

<input type="text" v-model.trim="msg">

作者：SleepWalkerLj
連結：https://www.jianshu.com/p/41dba59ab8e1
來源：簡書
著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8">
		 
		</script>
		<style>
		.class1{
		  background: #444;
		  color: #eee;
		}
		</style>
	</head>
	<body>	
		<div id="vue_det">
			<!-- v-model的使用 -->
			 <input type="text" v-model.trim="msg">
			    <h2>{{msg}}</h2>
			
			
			<input  type="radio" v-model="ok" value="true" />對  <br>
			<input  type="radio" v-model="ok" value="false" />錯 
			
			<h2>你的選擇是{{ok}}</h2>
			<input  type="checkbox" v-model="flist" value="香蕉" />香蕉
			<input  type="checkbox" v-model="flist" value="蘋果" />蘋果
			<input  type="checkbox" v-model="flist" value="橙子" />橙子
			
			<h2>你的選擇是{{flist}}</h2>
			
			
			<select v-model="type">
				<option value="電影">電影</option>
				<option value="其他">其他</option>
				<option value="漫畫">漫畫</option>
				<option value="小說">小說</option>
			</select>
			<br>
				<h2>你的選擇是{{type}}</h2>
			<br>
			
		<!-- 	v-html的使用 -->
		
		   <div v-html="site1"></div>
		   <!-- date的引用{}-->
		    <h1>site : {{site}}</h1>
		    <h1>url : {{url}}</h1>
			<span v-once>這個將不會改變: {{ msg }}</span>
		    <h1>{{details()}}</h1> 
			    <p title="1,2,3">content</p> 
			<!-- v-bind的HTML 屬性中的值應使用 v-bind 指令。
               以下例項判斷 use 的值，如果為 true 使用 class1 類的樣式，否則不使用該類： -->
			<label for="r1">修改顏色</label><input type="checkbox" v-model="use" id="r1">
			  <br><br>
			  <div v-bind:class="{'class1': use}">
			    v-bind:class 指令
			  </div>
			  
			 <!-- js的語法 -->
			   {{5+5}}<br>
			      {{ ok ? 'YES' : 'NO' }}<br>
			      {{ message.split('').reverse().join('') }}
			      <div v-bind:id="'list-' + id">菜鳥教程</div>
		</div>
		<script type="text/javascript">
		    var vm = new Vue({
		        el: '#vue_det',
		        data: {
					type:"其他",
					flist: [],
					ok: true,
					message: 'RUNOOB',
					msg: 'RUNOOB',
		            site1: "<h1>菜鳥教程</h1>",
		            site: "菜鳥教程",
		            url: "www.runoob.com",
		            alexa: "10000",
					use: false,
		        },
		        methods: {
		            details: function ( ) { 
		                return  this.site + this.url+this.alexa+ " - 學的不僅是技術，更是夢想！";
		            }
		        }
		    })
		</script>
	</body>
</html>