文本和多行文本
<body>
<script src="../libs/vue.js"></script>
<div id="app">
{{message}}
<br>
<input v-model="message">
<!--v-model双向绑定相当于两个指令的集合-->
<br>
{{messageValue}}
<br>
<input :value="messageValue" @input="valueChange($event)" >
<br>
<!--多行文本-->
{{messageArea}}
<br>
<textarea v-model="messageArea">
</textarea>
<!--放在文本区域的插值中，不会生效-->
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: '',
messageValue: '',
messageArea:''
},
methods:{
valueChange(event){
this.messageValue = event.target.value
}
}
})
</script>
</body>
复选框
<script src="../libs/vue.js"></script>
<div id="app">
<!--单个复选框-->
<input type="checkbox" id="checkbox" v-model="checked">
<label>{{checked}}</label>
<br>
<!--多个复选框-->
<input type="checkbox" id="xiaosu1" value="XiaoSu1" v-model="checkedName">
<!--for属性规定label与哪个表单元素绑定-->
<label for="xiaosu1">XiaoSu1</label>
<input type="checkbox" id="xiaosu2" value="XiaoSu2" v-model="checkedName">
<!--for属性规定label与哪个表单元素绑定-->
<label for="xiaosu2">XiaoSu2</label>
<input type="checkbox" id="xiaosu3" value="XiaoSu3" v-model="checkedName">
<!--for属性规定label与哪个表单元素绑定-->
<label for="xiaosu3">XiaoSu3</label>
<input type="checkbox" id="xiaosu4" value="XiaoSu4" v-model="checkedName">
<!--for属性规定label与哪个表单元素绑定-->
<label for="xiaosu4">XiaoSu4</label>
<br>
{{checkedName}}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
checked: false,
checkedName: []
},
})
</script>
</body>
单选按钮
<script src="../libs/vue.js"></script>
<div id="app">
<!--如果想单选按钮互斥，v-model绑定到同一个数据上-->
<input type="radio" id="one" value="one" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="two" v-model="picked">
<label for="two">Two</label>
<br>
{{picked}}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: '',
picked:''
},
})
</script>
选择框
<body>
<script src="../libs/vue.js"></script>
<div id="app">
<select v-model="selected">
<option value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
selected:{{selected}}
<br>
<select v-model="selectedArray" multiple>
<option value="AA">one</option>
<option value="BB">two</option>
<option value="CC">Three</option>
<option value="CC">Three</option>
<option value="CC">Three</option>
<option value="CC">Three</option>
</select>
selectedArray:{{selectedArray}}
<br>
<select v-model="selectedArray" multiple>
<option :value="item.value" v-for="item in options">
{{item.text}}
</option>
</select>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: '',
selected:'',
selectedArray:[],
/*option value显示 options里的value */
options:[
{text:'one', value:'AA'},
{text:'Two', value:'BB'},
{text:'Three', value:'CC'},
]
},
})
</script>
</body>
表单输入修饰符
<body>
<script src="../libs/vue.js"></script>
<div id="app">
<!--1、lazy-->
{{message}}
<input type="text" v-model.lazy="message">
<br>
<!--2、number-->
<input type="text" v-model.number="age">
<!--查看数据类型-->
<h2>{{age}}----{{typeof age}}</h2>
<br>
<!--3、trim-->
<input type="text" v-model.trim="name">
<h2>您输入的名字为：{{name}}</h2>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: '',
age:0,
name:''
},
})
</script>
</body>
网友评论