<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<input type="text" v-model="msg">
<p>----------------------</p>
<h1>{{msg2}}</h1>
<input type="text" :value="msg2" @input="valueChange">
<p>----------------------</p>
<label><input name="sex" type="radio" value="男" v-model="sex">男 </label>
<label><input name="sex" type="radio" value="女" v-model="sex">女 </label>
<h2>{{sex}}</h2>
<p>----------------------</p>
<!-- 勾选一个 -->
<label>
<input type="checkbox" v-model="isAgree">同意
</label>
<h2>{{isAgree?'同意':'不同意'}}</h2>
<button :disabled="!isAgree">sign</button>
<p>----------------------</p>
<!-- 多个选择 -->
<label>爱好：</label>
<input type="checkbox" value="篮球" v-model="hobbies">篮球
<input type="checkbox" value="足球" v-model="hobbies">足球
<input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
<input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
<h2>{{hobbies}}</h2>
<p>----------------------</p>
<!-- 值绑定 -->
<label>爱好：</label>
<label v-for="hobby in hobbies2_" :for="hobby">
<input type="checkbox" :id="hobby" :value="hobby" v-model="hobbies2">{{hobby}}
</label>
<h2>{{hobbies2}}</h2>
<p>----------------------</p>
<select name="city" v-model="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="深圳">深圳</option>
</select>
<p>{{city}}</p>
<p>----------------------</p>
<select name="cities" v-model="cities" multiple>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="深圳">深圳</option>
</select>
<p>{{cities}}</p>
<p>----------------------</p>
<!-- lazy -->
<input type="text" v-model.lazy="msg3">
<h1>{{msg3}}</h1>
<!-- number -->
<input type="number" v-model.number="age">
<h1>{{age}}====={{typeof age}}</h1>
<!-- trim -->
<input type="text" v-model.trim="name">
<h1>xxxx{{name}}xxxx</h1>
</div>
<script src="js/vue.3.2.2.js"></script>
<script>
// 1、创建Vue的实例对象
const app = Vue.createApp({
data(){//定义数据
return {
msg:'你好！',
msg2:'你好2！',
msg3:'你好3！',
sex:'男',
isAgree:false,
hobbies:[],
hobbies2_:["篮球","足球","羽毛球","乒乓球"],
hobbies2:[],
cities:['北京','上海','深圳'],
city:'北京',
age:0,
name:''
}
},
methods:{
valueChange(event){
this.msg2=event.target.value;
}
}
}).mount('#app');
</script>
</body>
</html>
浙公网安备 33010602011771号