<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<!-- es6原生写法 -->
<p>
<div>es6:</div>
<input type="text" oninput="document.querySelector('.res').textContent=this.value">
<span class="res"></span>
</p>
<!-- Vue -->
<div class="app">
<p>
<p>在vue中引用事件对象even前面必须加 $
v-on:事件 简化用 @ 表示 @input=v-on:input</p>
<!-- <input type="text" v-on:input="comment = $event.target.value"> -->
<input type="text" @input="comment = $event.target.value">
<span>{{ comment }}</span>
</p>
用v-model指令进行简化
<p>
<input type="text" v-model="comment" :value="comment">
<span>{{ comment }}</span>
</p>
延迟响应:失去焦点才响应.lazy 也是修饰符
<p>
<input type="text" v-model.lazy="comment" :value="comment">
<span>{{ comment }}</span>
</p>
</div>
<script>
const app = Vue.createApp({
data() {
return {
comment: '',
}
}
}).mount('.app')
</script>
</body>
</html>
此处评论已关闭