溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下怎么用vue.js組件模擬v-model指令，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
JS是JavaScript的簡稱，它是一種直譯式的腳本語言，其解釋器被稱為JavaScript引擎，是瀏覽器的一部分，主要用于web的開發，可以給網站添加各種各樣的動態效果，讓網頁更加美觀。
1、問題描述
在使用v-model指令實現輸入框數據雙向綁定，輸入值時對應的這個變量的值也隨著變化；但是這里不允許使用v-model，需要寫一個組件實現v-model指令效果
<div id="user">
<input type="text" v-model="username">
<label>{{username}}</label>
</div>
<script>
let v = new Vue({
el:'#user',
data:{
username:'zhangsan'
}
})
</script>2、實現源碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue模擬v-model指令</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="datas">
<input-model :value="num" @inputchange="num=arguments[0]"></input-model>
<br>
<span>
{{num}}
</span>
</div>
<script>
Vue.component('input-model',{
template:`<input type="text" :svalue="cvalue" @input="updateInput">`,
computed: {
cvalue() {
return this.svalue
}
},
props:['svalue'],
methods: {
updateInput: function(event){
let values = event.target.value
this.$emit('inputchange',values)
}
}
});
let v = new Vue({
el:'#datas',
data: {
num:'1'
}
})
</script>
</body>
</html>3、注意事項
（1）父組件中使用子組件，綁定的inputchange必須小寫，不能使用inputChange；
（2）子組件中的cvalue和計算屬性中的要保持一致；
（3）子組件中的@input和父組件中的@inputchange沒有必然關系；
（4）this.$emit('inputchange',values)中的inputchange要和DOM元素中的input-model一致
（5）父組件將num值通過props屬性傳到子組件中；子組件通過$emit觸發當前實例上的事件，將改變的值傳給父組件
內容擴展：
vue.js指令v-model實現方法
V-MODEL 是VUE 的一個指令，在input 控件上使用時，可以實現雙向綁定。
通過看文檔，發現他不過是一個語法糖。
實際是通過下面的代碼來實現的：
<%@ 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>以上是“怎么用vue.js組件模擬v-model指令”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
