参考《Vue.js实战》 梁灏
1. 基本用法
话不多说,来个入门:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单入门</title>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="name">
<p>您输入的是:{
{ name }}</p>
</div>
<script type="text/javascript">
let app = new Vue({
el:"#app",
data:{
name:''
}
});
</script>
</body>
</html>
输入中文时,如果想实时更新(好像没啥用),请将v-model改为@input
:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>@input</title>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<input type="text" @input="handleInput" placeholder="请输入...">
<p v-cloak>输入的内容是:{
{ message }}</p>
</div>
<script type="text/javascript">
let app = new Vue({
el:"#app",
data:{
message:''
},
methods:{
handleInput(event){
this.message = event.target.value;
}
}
});
</script>
</body>
</html>
单选按钮: 通过v-model和value实现互斥效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>单选按钮</title