<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</script>
<title>表单输入绑定</title>
</head>
<body>
<!--v-model 数据的双向绑定，只要改变一个值，其它的值也会跟着做出相应改变 。当在文本框中每输入一个字符时{{name}}都将会
随之发生改变，会大大的影响性能，需要用修饰符.lazy进行改善-->
<div id="app">
<h2>{{name}}</h2>
<h1>单行文本输入框</h1>
<input type="text" name="username" v-model.lazy="name" value=""/>
<h1>多行文本输入框</h1>
<textarea rows="" cols="" v-model="name"></textarea>
<h1>复选框</h1>
<span v-for="item in fruits">
{{item}}
<input type="checkbox" name="fruit" v-model="checkfruits" :value="item"/>
</span>
<h2>{{checkfruits}}</h2>
<h1>单选框</h1>
<span v-for="item in fruits">
{{item}}
<input type="radio" name="fruit" v-model="radiofruits" :value="item"/>
</span>
<!-- 选项下拉框，绑定v-model后，choosecity初始化为空 -->
<!-- <h1>选项框(下拉框)</h1>
<select v-model="choosecity">
<option v-for="item in citys" :value="item">{{item}}</option>
</select>
<h3>{{choosecity}}</h3> -->
<!-- 选项多选框，喜欢的城市可以是多个 ,mutiple属性可以是多选-->
<h3>选择喜欢的城市</h3>
<select v-model="morecitys" multiple="multiple">
<option v-for="item in citys" :value="item">{{item}}</option>
</select>
<h3>{{morecitys}}</h3>
<h3>修饰词</h3>
<input type="number" v-model.number="phone" placeholder="请输入你的电话"/>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
name:"小明",
fruits:["苹果","雪梨","香蕉"],
checkfruits:[],
radiofruits:"",
citys:["北京","上海","深圳"],
// choosecity:"",
morecitys:[]
}
})
</script>
</body>
</html>
在这里插入代码片
