- v-model绑定input
<div id="app">
//通过v-model实现双向绑定
<input type="text" v-model="message" />{{message}}
//v-model的实现原理
<input type="text" @input="message=$event.target.value" :value="message" />{{message}}
</div>
- v-model绑定radio
radio的HTML写法:<label for="male">男<input type="radio" name="sex" id="male"></label><label for="female">女<input type="radio" name="sex" id="female"></label>,通过指定name属性进行编组,否则都可以选中。但如果指定的v-model可以省略name属性。
<div id="app">
<label for="male">男<input type="radio" id="male" value="男" v-model="sex"></label>
<label for="female">女<input type="radio" id="female" value="女" v-model="sex">/label>
<h2>你选择的是:{{sex}}</h2>
</div>
<script src="vue/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
const app=new Vue({
el:'#app',
//可以设置默认值,model会自动选中,实现双向编定
data:{
sex:''
}
})
</script>
- v-model绑定checkbox
只绑定一个checkbox,v-model对应的是一个布尔值,绑定多个checkbox时,v-model对应的是一个数组,checkbox加value值。
<div id="app">
<label for="male"><input type="checkbox" id="agree" v-model="agree">同意协议</label>
{{agree}}
<button type="button" :disabled="!agree">下一步</button>
</div>
<script src="vue/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
const app=new Vue({
el:'#app',
data:{
agree:false
}
})
</script>
<div id="app">
<input type="checkbox" value="河南" v-model="shengfen">河南
<input type="checkbox" value="山东" v-model="shengfen">山东
你选择的是:{{shengfen}}
</div>
<script src="vue/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
const app=new Vue({
el:'#app',
data:{
shengfen:[]
}
})
</script>
- v-model绑定select
select也和checkbox一样,分单个选择和多个选择两种情况。
<div id="app">
<!-- 选择单个 -->
<select v-model="result">
<option value="苹果">苹果</option>
<option value="梨">梨</option>
<option value="芒果">芒果</option>
</select>
<h2>你选择的是:{{result}}</h2>
<!-- 选择多个 -->
<select v-model="results" multiple>
<option value="苹果">苹果</option>
<option value="梨">梨</option>
<option value="芒果">芒果</option>
</select>
<h2>你选择的是:{{results}}</h2>
</div>
<script src="vue/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
const app=new Vue({
el:'#app',
data:{
result:'梨',
results:[]
}
})
</script>
- v-model修饰符
- lazy 默认同步输入数据,使用lazy后在回车或者失去焦点后才会更新
- number 默认在给变量赋值值时是字符型,使用number直接赋成number类型,主要用于数字类型
- trim 对输入的前后空格进行去除