本文目录 ⌄
基本使用
<input type="text" v-model="message">等价于
<input type="text" :value="message" @input="inputChange"> <script>
const app={
template:"#my-app",
data(){
return{
message: "hello world"
}
},
methods:{
inputChange(event){
this.message = event.target.value;
}
}
};
Vue.createApp(app).mount("#app");
</script>绑定其它表单
<template id="my-app">
<!-- 1.绑定textarea -->
<label for="intro">
自我介绍
<textarea name="intro" id="intro" cols="30" rows="10" v-model="intro"></textarea>
</label>
<h2>intro:{{intro}}</h2>
<!-- 2.1.checkbox -->
<label for="agree">
<input type="checkbox" id="agree" v-model="isAgree"> 同意协议
</label>
<h2>isAgree:{{isAgree}}</h2>
<!-- 2.2.多选框 -->
<span>你的爱好</span>
<label for="basketball">
<input type="checkbox" id="basketball" value="basketball" v-model="hobbies"> 篮球
</label>
<label for="football">
<input type="checkbox" id="football" value="football" v-model="hobbies"> 足球
</label>
<label for="tennis">
<input type="checkbox" id="tennis" value="tennis" v-model="hobbies"> 网球
</label>
<h2>hobbies:{{hobbies}}</h2>
<!-- 3.radio -->
<span>你的性别</span>
<!-- v-model绑定到同一个属性上时会自动互斥选择 -->
<label for="male">
<input type="radio" id="male" value="male" v-model="gender"> 男
</label>
<label for="female">
<input type="radio" id="female" value="female" v-model="gender"> 女
</label>
<h2>gender:{{gender}}</h2>
<!-- 4.select -->
<span>喜欢的水果</span>
<select v-model="fruit" multiple size="2">
<option value="apple">苹果</option>
<option value="orange">橘子</option>
<option value="banana">香蕉</option>
</select>
<h2>fruit:{{fruit}}</h2>
</template>
<script src="../js/vue.js"></script>
<script>
const app={
template:"#my-app",
data(){
return{
intro: "hello world",
isAgree: false,
hobbies: [],
gender: "male",
fruit: "apple"
}
}
};
Vue.createApp(app).mount("#app");
</script>v-model的修饰符
lazy修饰符将input的@input事件修改为@change触发。
number将输入的字符串转化为数字。
trim去掉首尾的空白符号。
<template id="my-app">
<!-- 1.lazy修饰符 -->
<!-- <input type="text" v-model.lazy="message"> -->
<!-- 2.number修饰符 -->
<!-- v-model默认为string类型 -->
<!-- <input type="text" v-model.number="message">
<h2>{{message}}</h2>
<button @click="showType">查看类型</button> -->
<!-- 3.trim修饰符 -->
<input type="text" v-model.trim="message">
<button @click="showResult">查看结果</button>
</template>
<script src="../js/vue.js"></script>
<script>
const app={
template:"#my-app",
data(){
return{
message: "hello world"
}
},
methods:{
showType(){
console.log(this.message, typeof this.message);
},showResult(){
console.log(this.message);
}
}
};
Vue.createApp(app).mount("#app");
</script>