index.html
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>vue</title>
<link rel="stylesheet" href="style.css" target="_blank" rel="external nofollow" >
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<!--vue-app是根容器-->
<div id="vue-app">
<h1>鍵盤 Events </h1>
<label >姓名：</label>
<input type="text" v-on:keyup.enter="logName">
<label >年齡：</label>
<input type="text" v-on:keyup.enter="logAge">
</div>
<script src="app.js"></script>
</body>
</html>
app.js
//執行個體化VUE對象
new Vue({
el:"#vue-app",
//僅限于在vue-app容器下
data:{
},
methods:{
logName:function(){
console.log("在此輸入你的名字！");
},
logAge:function(){
console.log("在此輸入你的年齡！");
}
}
});
![VUE學習筆記：7.v-model指令講解1.v-model介紹2.v-model的基本使用3.v-model的實作原理4.v-model操作radio類型5.v-model操作checkbox類型6.v-model操作select類型7.值綁定操作8.v-model的修飾符講解[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)