在此用的是v-model双向数据绑定
所谓的双向数据绑定指的是，不仅仅只是从M取得数据渲染到V，还可以从V的变化动态的更新M的值
V---------M
在实际项目开发中，不仅仅只是将模型准确的渲染到视图中，视图中的数据的变化，更需要模型去进行有效的记录。所以我们需要使用双向数据绑定的机制。使用v-model可以对数据进行双向的绑定操作。
值得注意的是，由于记载页面元素值得需求都是发生在表单元素中，所以v-model只能运用在表单元素中。
第一步：引入vue框架
<script src="vue-2.4.0.js" type="text/javascript"></script>第二步：建立元素区
在body中建立一个被vue控制的元素区，id属性值会被vue所引用
<body>
<div id="app">
</div>
</body>第三步：创建VM对象
<script type="text/javascript">
//创建一个Vue对象
var vm=new Vue({
//获取渲染元素区
//el属性，指定为哪个标签进行相应的vue操作
el:"#app",
//对数据的表达，数据约定俗称的是以json形式来表观的
//data中，存放的都是el中要是用的数据，也就是M（model）
data:{
}
});
</script>实例：
在以上三步的基础上开始编写实现计算器代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计算器</title>
<script src="vue-2.4.0.js" type="text/javascript"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="str1">
<!--选项，绑定-->
<select v-model="option">
<option value="1">+</option>
<option value="2">-</option>
<option value="3">*</option>
<option value="4">/</option>
</select>
<input type="text" v-model="str2">
<!--单击事件-->
<input type="button" value="=" @click="but">
<!--结果-->
<input type="text" v-model="results">
</div>
</body>
<script>
//创建一个Vue对象
var vm=new Vue({
el:"#app", //el属性，指定某个标签进行相应的vue操作
data:{ //data中，存放的都是el中要用的数据，也就是M（model）
//默认值
str1:"",
str2:"",
results:"",
option:"1" //默认为加号
},
methods:{
//计算器
but(){
//这里可以直接使用this
switch(this.option){
//计算input框内输入的值进行加减乘除
case "1":
this.results=parseInt(this.str1)+parseInt(this.str2)
break;
case "2":
this.results=parseInt(this.str1)-parseInt(this.str2)
break;
case "3":
this.results=parseInt(this.str1)*parseInt(this.str2)
break;
case "4":
this.results=parseInt(this.str1)/parseInt(this.str2)
break;
}
}
}
});
</script>
</html>运行结果：
基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。
更多推荐
已为社区贡献1条内容
