1. v-model原理
原创
©著作权归作者所有:来自51CTO博客作者可乐不可的原创作品,请联系作者获取转载授权,否则将追究法律责任
v-model原理
-
概述
v-model 相当于:value
和@input
的结合
-
使用
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>v-model原理</title></head><body><div id="app">
<label for="">
v-model:
<input type="text" v-model="str">
</label>
<label for="">
手动实现v-model:
<input type="text" :value="str" @input="input">
</label>
<h2>{{ str }}</h2></div><!-- 开发环境版本,包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>
app = new Vue({
data:{
str: ""
},
methods:{
input(event){
this.str = event.target.value
}
}
}).$mount('#app')</script></body></html>