7.Vue指令：v-model

最新推荐文章于 2024-01-28 15:59:51 发布

高新园养鸡场

最新推荐文章于 2024-01-28 15:59:51 发布

阅读量237

点赞数

分类专栏： Vue 2.0 文章标签： vue vue.js 前端

本文链接：https://blog.csdn.net/zyc3545/article/details/108172492

版权

Vue 2.0 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

v-model特点

是vue.js中唯一一个能实现数据双向绑定的指令。
限制运用在input（radio，text，checkbox..）、select、textarea元素中。
会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源，应通过 JavaScript 在组件的 data 选项中声明初始值。

v-bind单向绑定

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="outer">	
			<input type="text" v-bind:value="useName1"/>
			<p id="userName1">您输入的用户名为：{{useName1}}</p>
		</div>
	</body>
	<script>
		var vm = new Vue({
			el:".outer",
			data:{
				useName1:"空空如也"
			}
		});
	</script>
</html>

向input里面输入数据，会发现model中数据并没有改变，而引用了model中数据的p标签中插值自然也没改变。所以，v-bind只实现了m->v，而v->m无法实现。

v-model双向绑定

将上面代码替换为v-model：

<!-- v-model后面不需要跟:value之类的，这点不同于v-bind -->
<input type="text" v-model="useName2"/> 
<p id="userName2">您输入的用户名为：{{useName2}}</p>

则在input输入数据的同时，p标签插值也在改变。

案例：简单计算器

思路

一个简单的计算器可以由以下组件构成：

输入框input1--输入被操作数
符号框select--选择操作符
输入框input2--输入被操作数
“=”号按钮--绑定计算函数
输入框input3--输出计算结果

以上输入输出操作在使用v-model后会非常便捷，代码清晰，无需操作dom。

实现

//html
<div id="content">
    <input type="text" id="num1" v-model="num1" />
    <select id="symbol" v-model="symbol">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input type="text" id="num2" v-model="num2" />
   <button v-on:click="calc">=</button>
   <input type="text" id="result" v-model="result" />
</div>

//vue
var vm = new Vue({
    el: "#content",
    data: {
        num1: 0,
        symbol: "+",
        num2: 0,
        result: 0
    },
    methods: {
        calc: function() {
    	switch (this.symbol) {
    		case "+":
    			this.result = parseFloat(this.num1) + parseFloat(this.num2);
    			break;
    		case "-":
    			this.result = parseFloat(this.num1) - parseFloat(this.num2);
    			break;
    		case "*":
    			this.result = parseFloat(this.num1) * parseFloat(this.num2);
    			break;
    		case "/":
    			this.result = parseFloat(this.num1) / parseFloat(this.num2);
    			break;
    	}
        }
    }
});

最终效果：