vue.js指令v-model實(shí)現(xiàn)方法
更新時(shí)間：2016年12月05日 10:07:29 作者：自由港
這篇文章主要為大家詳細(xì)介紹了vue.js指令v-model實(shí)現(xiàn)方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
V-MODEL 是VUE 的一個(gè)指令，在input 控件上使用時(shí)，可以實(shí)現(xiàn)雙向綁定。
通過(guò)看文檔，發(fā)現(xiàn)他不過(guò)是一個(gè)語(yǔ)法糖。
實(shí)際是通過(guò)下面的代碼來(lái)實(shí)現(xiàn)的：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="vue/vue.js"></script>
</head>
<body>
<div id="app-6">
<input :value="person.name" @input="person.name = $event.target.value">
<input :value="person.age" @input="person.age =$event.target.value">
{{person}}
</div>
<script type="text/javascript">
var app =new Vue({
el: '#app-6',
data:{
person:{name:"ray",age:19}
}
})
</script>
</body>
</html>
通過(guò)綁定綁定INPUT事件來(lái)更新對(duì)應(yīng)對(duì)象的值。
本文已被整理到了《Vue.js前端組件學(xué)習(xí)教程》，歡迎大家學(xué)習(xí)閱讀。
關(guān)于vue.js組件的教程，請(qǐng)大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue2.0實(shí)現(xiàn)組件之間數(shù)據(jù)交互和通信操作示例
這篇文章主要介紹了Vue2.0實(shí)現(xiàn)組件之間數(shù)據(jù)交互和通信操作,結(jié)合實(shí)例形式分析了vue2.0組件之間通信的原理、實(shí)現(xiàn)方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-05-05
本文主要介紹了vue中傳參params和data的區(qū)別，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
數(shù)據(jù)的重要性我們大家都知道，就算再小的項(xiàng)目中都可能使用幾個(gè)圖表展示，我最近在做項(xiàng)目的過(guò)程中也是需要用到圖表，最后選擇了echarts圖表庫(kù)，這篇文章主要介紹了Vue使用Echarts畫柱狀圖2022-12-12
vue 獲取視頻時(shí)長(zhǎng)的實(shí)例代碼
這篇文章主要介紹了vue 獲取視頻時(shí)長(zhǎng)的實(shí)例代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
Vue判斷字符串(或數(shù)組)中是否包含某個(gè)元素的多種方法
在我們前端日常開(kāi)發(fā)中經(jīng)常會(huì)遇到判斷一個(gè)字符串中是否包含某個(gè)元素的需求,下面這篇文章主要給大家介紹了關(guān)于Vue判斷字符串(或數(shù)組)中是否包含某個(gè)元素的多種方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
這篇文章主要給大家介紹了.vue?文件是如何編譯成瀏覽器可執(zhí)行的文件,文中通過(guò)代碼示例將編譯流程介紹的非常詳細(xì),對(duì)我們的學(xué)習(xí)或工作有一定的價(jià)值,感興趣的同學(xué)可以參考閱讀下2023-09-09
vue css 引入asstes中的圖片無(wú)法顯示的四種解決方法
這篇文章主要介紹了vue css 引入asstes中的圖片 無(wú)法顯示的幾種解決方案,本文給出了四種解決方法，每種方法給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-03-03
vue2.0結(jié)合Element實(shí)現(xiàn)select動(dòng)態(tài)控制input禁用實(shí)例
本篇文章主要介紹了vue2.0結(jié)合Element實(shí)現(xiàn)select動(dòng)態(tài)控制input禁用實(shí)例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05
.env文件是vue運(yùn)行項(xiàng)目時(shí)的環(huán)境配置文件，這篇文章主要介紹了vue多環(huán)境配置之 .env配置文件,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了uniapp引入模塊化js文件和非模塊化js文件的四種方式，本文結(jié)合實(shí)例代碼給大家講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-11-11