区别v-model的双向绑定(另一种实现方法)
2019-11-28 本文已影响0人
web30
在js中学到一个不使用vue提供的v-model也能实现双向绑定的两种方法和大家分享，前提是也需要引入vue，具体下方见代码：
- 第一种
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{msg}}
<input :value="msg" @input="msg=$event.target.value">
</div>
<script>
new Vue({
el: '#app',
data:{
msg: 'abc'
}
})
</script>
</body>
</html>
- 第二种
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{msg}}
<input :value="msg" @input="fn($event)">
</div>
<script>
new Vue({
el: '#app',
data:{
msg: 'abc'
},
methods: { // 在js里，methods需要在后面加s
fn(e){
// console.log(e.target.value)
this.msg = e.target.value
}
}
})
</script>
</body>
</html>
