v-model的使用

v-model的使用

v-model的作用

实现数据的双向绑定

<div id="app">
	<input type="text" v-model="message"/>
	<h2>{{message}}</h2>
</div>
		
<script src="js/vue.js"></script>
<script type="text/javascript">
	let app = new Vue({
		el:'#app',
		data:{
			message: 'hello world'
		}
	})
</script>

v-model的原理

v-model实现数据双向绑定的操作实际上相当于两个指令的结合，v-bind动态绑定数据并渲染到input上，v-on：input = “”实时监听数据改变并将数据赋值给message

<div id="app">
	<input type="text" :value="message" @input="valueChange"/>
	<h2>{{message}}</h2>
</div>
		
<script src="js/vue.js"></script>
<script type="text/javascript">
	let app = new Vue({
		el:'#app',
		data:{
			message: 'hello world'
		},
		methods:{
			valueChange(event){
				//event为产生事件后浏览器自己生成的对象，该event对象就包含了事件所有的信息
				this.message = event.target.value;
			}
		}
	})
</script>

v-model结合radio（单选框）类型使用

要实现radio单选项的互斥，必须设置一个属性name = “sex”，但是用了v-model属性绑定了同一个sex实现了互斥，提交时只会提交一个选中项，就不需要再定义name属性了。

<div id="app">
			<label for="male">
                <input type="radio" v-model="sex" id="male" value="男">男
            </label>
            <label for="female">
                <input type="radio" v-model="sex" id="female" value="女">女
            </label>
            <h2>您选择的性别是：{{sex}}</h2>
		</div>
		
		<script src="js/vue.js"></script>
		<script type="text/javascript">
			let app = new Vue({
				el:'#app',
				data:{
                    sex: ''
				}
			})
		</script>

v-model结合checkbox（复选框）类型使用

复选框分为两种情况：单个勾选框和多个勾选框

单选框：

        <!-- checkbox单选框案例 -->

		<div id="app">
			<label for="agree">
                <input type="checkbox" id="agree" v-model="isAgree">同意协议
            </label>
            <h2>您选择的是{{isAgree}}</h2>
            <button :disabled="!isAgree">下一步</button>
		</div>
		
		<script src="js/vue.js"></script>
		<script type="text/javascript">
			let app = new Vue({
				el:'#app',
				data:{
                    isAgree: false		//单选框
				}
			})
		</script>

复选框：

		<div id="app">
            <input type="checkbox" value="篮球" v-model="hobbies">篮球
            <input type="checkbox" value="足球" v-model="hobbies">足球
            <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
            <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
            <h2>您的爱好是：{{hobbies}}</h2>
        </div>

		<script src="js/vue.js"></script>
		<script type="text/javascript">
			let app = new Vue({
				el:'#app',
				data:{
                    isAgree: false,     //单选框
                    hobbies: []         //复选框
				}
			})
		</script>

v-model结合select使用（单/复选框）类型使用

 <div id="app">
      <!-- 单选下拉框 -->
      <select name="abc" id="" v-model="fruit">
        <option value="苹果">苹果</option>
        <option value="香蕉">香蕉</option>
        <option value="菠萝">菠萝</option>
        <option value="西瓜">西瓜</option>
      </select>
      <h2>您选中的是：{{fruit}}</h2>

    <!-- 单选下拉框,按住ctrl键选择多个 -->
      <select name="abc" id="" v-model="fruits" multiple>
        <option value="苹果">苹果</option>
        <option value="香蕉">香蕉</option>
        <option value="菠萝">菠萝</option>
        <option value="西瓜">西瓜</option>
      </select>
      <h2>您选中的是：{{fruits}}</h2>
    </div>

    <script src="js/vue.js"></script>
    <script type="text/javascript">
        let app = new Vue({
            el:'#app',
            data:{
                fruit: '香蕉',
                fruits: []
            }
        })
    </script>

值绑定概念（input）

对于单选按钮，复选框及选择框的选项，v-model绑定的值通常是静态字符串，但是有时我们可能想把值绑定到 Vue 实例的一个动态属性上，这时可以用v-bind实现，并且这个属性的值可以不是字符串。

        <div id="app">
			<label v-for="item in originHobbies" :for="item">
				<input type="checkbox" :value="item" id="item" v-model="hobbies">{{item}}
			</label>
        </div>

		<script src="js/vue.js"></script>
		<script type="text/javascript">
			let app = new Vue({
				el:'#app',
				data:{
                    isAgree: false,
                    hobbies: [],
					originHobbies: ['篮球','足球','乒乓球','羽毛球','台球','高尔夫']
				}
			})
		</script>

修饰符

lazy修饰符（懒加载）：

默认情况下，v-model默认是在input事件中同步输入框的数据，也就述说数据是根据输入框所输入数据实时加载的，这样性能开销较大

lazy修饰符可以让数据在失去焦点或者回车时才会更新

<input type="text" v-model.lazy="message">

number修饰符：

默认情况下，在输入框输入任何东西都会被判定为字符串类型进行处理

但如果我们希望处理的是数字类型，那么最好直接将内容当作数字进行处理

number修饰符可以让在输入框中输入的内容自动转成数字类型

<input type="number" v-model.number="age">

trim修饰符：

如果输入内容首尾有很多空格，通常我们希望将他们去除

trim修饰符可以过滤内容左右两边的空格

<input type="text" v-model.trim="message2">