06、vue.js 之表单控件绑定
2017-05-22 20:58
676 查看
详细说明：https://cn.vuejs.org/v2/guide/forms.html#基础用法
<!DOCTYPE html>
<html lang="en" xmlns:v-bing="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="radio" value="One" v-model="a" >
<input type="radio" value="Two" v-model="a" >
{{ a }}
<br>
<br>
<!-- 当一个复选按钮的时候 选中=true 没选中=false -->
<!-- 如果是多个复选按钮v-model绑定同一个 data里的需要定义成数组 -->
<input type="checkbox" value="aaa" v-model="b">
<input type="checkbox" value="bbb" v-model="b">
<input type="checkbox" value="ccc" v-model="b">
{{ b }}
<br>
<br>
<select v-model="c">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
{{ c }}
<br>
<br>
<br>
<select v-model="d" multiple>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
{{ d }}
<br>
<br>
<br>
<!-- 失去焦点 -->
<input type="text" v-model.lazy="e">
{{ e }}
<br>
<br>
<br>
<!-- 去掉收尾的空格 -->
<input type="text" v-model.trim="f">
{{ f }}
</div>
<script>
new Vue({
el: '#app',
data: {
a: '',
b: [],
c: '',
d: [],
e: '',
f: ''
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en" xmlns:v-bing="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="radio" value="One" v-model="a" >
<input type="radio" value="Two" v-model="a" >
{{ a }}
<br>
<br>
<!-- 当一个复选按钮的时候 选中=true 没选中=false -->
<!-- 如果是多个复选按钮v-model绑定同一个 data里的需要定义成数组 -->
<input type="checkbox" value="aaa" v-model="b">
<input type="checkbox" value="bbb" v-model="b">
<input type="checkbox" value="ccc" v-model="b">
{{ b }}
<br>
<br>
<select v-model="c">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
{{ c }}
<br>
<br>
<br>
<select v-model="d" multiple>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
{{ d }}
<br>
<br>
<br>
<!-- 失去焦点 -->
<input type="text" v-model.lazy="e">
{{ e }}
<br>
<br>
<br>
<!-- 去掉收尾的空格 -->
<input type="text" v-model.trim="f">
{{ f }}
</div>
<script>
new Vue({
el: '#app',
data: {
a: '',
b: [],
c: '',
d: [],
e: '',
f: ''
}
})
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Vue.js每天必学之表单控件绑定
- Vue.js-----轻量高效的MVVM框架（七、表单控件绑定）
- Vue.js 学习(8) -- v-model: 表单控件绑定
- 学习vue.js表单控件绑定操作
- vue.js 表单控件 输入绑定 v-model的使用
- Vue.js学习 Item9 – 表单控件绑定
- Vue.js 学习8 表单控件绑定
- 表单控件绑定vue.js
- Vue.js学习 Item9 – 表单控件绑定
- vue.js基础知识篇(3):计算属性、表单控件绑定
- Vue.js -表单控件绑定
- Vue.js笔记-表单控件绑定
- vue.js表单数据双向绑定
- vue v-model表单控件绑定详解
- Atitit vue.js 把ajax数据 绑定到form表单
- Vue基础之表单控件绑定
- vue2.0 之表单控件绑定
- Vue.js 表单控件
- Vue.js表单控件实践
- Vue进阶之表单控件绑定