<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- <input type="text" v-model="msg">
<h2>{{msg}}</h2> -->
<input type="text" v-bind:value="msg" v-on:input="valueChange">
<!-- 或者: <input type="text" :value="msg" @input="msg=$event.target.value"> -->
<h2>{{msg}}</h2>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el :'#app',
data: function () {
return {
msg: 'abc'
}
},
methods: {
valueChange(e) {
console.log(e.target.value);
this.msg = e.target.value;
}
}
});
</script>
</body>
</html>
Vue v-bind、v-on实现v-model原理
最新推荐文章于 2024-07-08 08:23:29 发布