欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

一文輕松了解v-model及其修飾符

 更新時間:2021年11月08日 15:44:51   作者:Andy_W  
這篇文章主要給大家介紹了關于v-model及其修飾符的相關資料,v-model指令有三個可以選用的修飾符:.lazy、.number以及.trim,本文通過示例代碼介紹的非常詳細,需要的朋友可以參考下

前言

用來綁定數(shù)據(jù)和元素value值,實現(xiàn)雙向綁定。

當元素的值改變的時候,數(shù)據(jù)也改變,反過來,當數(shù)據(jù)發(fā)生改變,元素的值也改變。

在大部分情況下,所有用戶的輸入值都要通過v-model,一來好用,二來安全,而且功能也很強大。

<div class="app">
	<input type="text" v-model="name">
	{{name}}
</div>
var app = new Vue({
	el:'.app',
	data:{
		name:'Alice'
	}
});

v-model的修飾符:

lazy

懶惰,表示惰性更新,不會立馬更新。

事實上它是觸發(fā)了一個change事件。

好處:當用戶輸入完了才綁定,才會顯示表單驗證的結果,不管正確還是錯誤。但在用戶輸入的過程中,不去打擾他。另外性能也有一點點的提高(不過很小,可以忽略不計)

<div class="app">
    <input type="text" v-model.lazy="name">
    {{name}}
</div>

trim

修剪; 切去,割掉,這里表示:去掉前后兩端的所有空格

<div class="app">
    <input type="text" v-model.trim="name">
    {{name}}
</div>

number

一般用于年齡、價錢等可以用數(shù)字來表示的類型

<div class="app">
    <input type="text" v-model.number="age">
    {{age}}
</div>

在通常情況下,如果沒有number,用戶輸入的是數(shù)字,但是也是字符串的數(shù)字。如果這里填了修飾符 v-model.number那么得到就是number類型的數(shù)字了,不用再轉換了。

v-model除了能在input 的type為text輸入框中使用,還能在其他地方使用。

v-model在不同input類型以及在其他元素上的使用

1.除了在以外,還能在input元素為其他類型上使用

1.1  在input元素 類型為radio上使用(單選框)

<div class="app">
	<label>
		男
		<input type="radio" v-model="sex" value="male">
	</label>
	<label>
		女
		<input type="radio" v-model="sex" value="famale">
	</label>
	{{sex}}
</div>
//main.js
var app = new Vue({
	el:'.app',
	data:{
		sex:'',
	}
});

1.2在input元素 類型為checkbox上使用(復選框)

<div class="app">
	你喜歡男的還女的:<br>
	<label>
		男
		<input type="checkbox" v-model="sex" value="male">
	</label>
	<label>
		女
		<input type="checkbox" v-model="sex" value="famale">
	</label><br>
	{{sex}}
</div>
var app = new Vue({
	el:'.app',
	data:{
		sex:['male'],
	}
});

2. v-model在textarea中的使用(多行文本)

多行文本

其實多行文本,跟單行文本的使用沒有什么區(qū)別,只不過一個多行一個單行,使用是一樣的。

<div class="app">
	<textarea v-model="article"></textarea>
</div>
var app = new Vue({
	el:'.app',
	data:{
		article:`has a lot of code。。。。。。。。。。。。。。。。。。。。`,
	}
});

3. v-model在select中的使用(下拉列表)

3.1 單選下拉列表

<div class="app">
	<div>where are you from?</div>
	<select v-model='from'>
		<option value="1">GUANGZHOU</option>
		<option value="2">BEIJING</option>
	</select>
</div>
var app = new Vue({
	el:'.app',
	data:{
		from:'1',
	}
});

3.2 多選下拉列表

其實就是元素加個multiple屬性,表示多個,多選

<div class="app">
	<div>where are you want to go?</div>
	<select v-model='from' multiple>
		<option value="1">GUANGZHOU</option>
		<option value="2">BEIJING</option>
		<option value="4">SHANGHAI</option>
		<option value="5">CHENGDU</option>
	</select>
</div>

var app = new Vue({
	el:'.app',
	data:{
		from:['1','2'],
	}
});

總結

到此這篇關于v-model及其修飾符的文章就介紹到這了,更多相關v-model及其修飾符內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • vue 彈窗時 監(jiān)聽手機返回鍵關閉彈窗功能(頁面不跳轉)

    vue 彈窗時 監(jiān)聽手機返回鍵關閉彈窗功能(頁面不跳轉)

    這篇文章主要介紹了vue 彈窗時 監(jiān)聽手機返回鍵關閉彈窗功能,本文給大家介紹的非常詳細,具有一定的參考借鑒價值(頁面不跳轉) ,需要的朋友可以參考下
    2019-05-05
  • vue2?自定義?el-radio-button?的樣式并設置默認值的方法

    vue2?自定義?el-radio-button?的樣式并設置默認值的方法

    這篇文章主要介紹了vue2?自定義?el-radio-button?的樣式并設置默認值的操作方法,代碼分為html部分和css修改樣式代碼,代碼簡單易懂,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-10-10
  • 教你如何使用VUE組件創(chuàng)建SpreadJS自定義單元格

    教你如何使用VUE組件創(chuàng)建SpreadJS自定義單元格

    這篇文章主要介紹了使用VUE組件創(chuàng)建SpreadJS自定義單元格的方法,通常我們使用組件的方式是,在實例化Vue對象之前,通過Vue.component方法來注冊全局的組件,文中通過實例代碼給大家介紹的非常詳細,需要的朋友參考下吧
    2022-01-01
  • vue 解決IOS10低版本白屏的問題

    vue 解決IOS10低版本白屏的問題

    這篇文章主要介紹了vue 解決IOS10低版本白屏的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • vue前端通過騰訊接口獲取用戶ip的全過程

    vue前端通過騰訊接口獲取用戶ip的全過程

    今天在寫項目掉接口的時候有一個接口需要到了用戶的ip地址,查了半天覺得這個方法不錯,下面這篇文章主要給大家介紹了關于vue前端通過騰訊接口獲取用戶ip的相關資料,需要的朋友可以參考下
    2022-12-12
  • mpvue中配置vuex并持久化到本地Storage圖文教程解析

    mpvue中配置vuex并持久化到本地Storage圖文教程解析

    這篇文章主要介紹了mpvue中配置vuex并持久化到本地Storage的教程詳解,# 配置vuex和在vue中相同,只是mpvue有一個坑,就是不能直接在new Vue的時候傳入store。本文分步驟給大家介紹的非常詳細,需要的朋友參考下吧
    2018-03-03
  • 解決vue-router 切換tab標簽關閉時緩存問題

    解決vue-router 切換tab標簽關閉時緩存問題

    這篇文章主要介紹了解決vue-router 切換tab標簽關閉時緩存問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07
  • 基于vue2實現(xiàn)左滑刪除功能

    基于vue2實現(xiàn)左滑刪除功能

    這篇文章主要為大家詳細介紹了基于vue2實現(xiàn)左滑刪除功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-11-11
  • vue中的局部過濾器和全局過濾器代碼實操

    vue中的局部過濾器和全局過濾器代碼實操

    這篇文章主要分享的是vue中的局部過濾器和全局過濾器代碼實操,下面文章主要以代碼展現(xiàn),具有一的的知識參考性,需要的小伙伴可以參考一下
    2022-02-02
  • 詳解axios在vue中的簡單配置與使用

    詳解axios在vue中的簡單配置與使用

    本篇文章主要介紹了詳解axios在vue中的簡單配置與使用,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-05-05

最新評論