<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--<label for="username">用户名:</label>-->
<!--<input type="text" v-model="msg" id="username">-->
<!--<p>{{ msg }}</p>-->
<!--<textarea name="" id="" v-model="msg"></textarea>-->
<!--单个复选框 使用列表保存-->
<!--<label for="checkbox">{{checked}}</label>-->
<!--<input type="checkbox" id="checkbox" v-model="checked">-->
<!--多个复选框 使用列表保存-->
<!--<input type="checkbox" id="jack" value="Jack9" v-model="checkedNames">-->
<!--<!–<label for="jack">Jack</label>–>-->
<!--<input type="checkbox" id="john" value="John9" v-model="checkedNames">-->
<!--<!–<label for="john">John</label>–>-->
<!--<input type="checkbox" id="mike" value="Mike9" v-model="checkedNames">-->
<!--<!–<label for="mike">Mike</label>–>-->
<!--<span>{{ checkedNames }}</span>-->
<!--下拉菜单-->
<!--<select name="" id="" v-model="selected">-->
<!--<option disabled value="">请选择</option>-->
<!--<option >A</option>-->
<!--<option >T</option>-->
<!--<option >Y</option>-->
<!--</select>-->
<!--<span>Selected: {{ selected }}</span>-->
<!--懒监听 input框输入的时候,p标签不同时更新,只有enter一下,p标签才会同步到input标签-->
<!--<input v-model.lazy="msg" >-->
<!--<p>{{msg}}</p>-->
<!--数字显示 type="number"-->
<!--<input v-model.number="age" type="number">-->
<!--<p>{{age}}</p>-->
<!--清除前后空格-->
<input v-model.trim="msg">
<p>{{msg}}</p>
</div>
<script src="../vue.js"></script>
<script>
new Vue({
el:'#app',
data(){
return{
msg:'',
checked:true,
checkedNames:[],
selected:'' ,
age:'ffff'
}
}
})
</script>
</body>
</html>