本文标识 : V00004
本文编辑 : Jack 风
编程工具 : Vscode
阅读时长 : 5分钟
例1、数据双向绑定
实例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<h4> {{ msg }} </h4>
<!-- v-bind 只能实现数据单向绑定, 从M 自动绑定到V ,无法实现数据双向的绑定 -->
<!-- <input type="text" :value="msg" style="width: 100%" > -->
<!-- v-model 指令,可以实现 表单元素 和Model 中数据的双向数据绑定-->
<!-- 注意: 使用 v-model 只能用运用在表单元素中 -->
<!-- input(radio, text, address, email....) select checkbox textarea-->
<input type="text" style="width: 100%" v-model="msg">
</div>
<script>
// 创建Vue 实例 得到 VieModel
var vm=new Vue({
el: '#app',
data: {
msg:'欢迎大家关注公号:A2Data'
},
methods: {
}
});
</script>
</body>
</html>
效果如下
例2、简易计算器
实例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="n1">
<select v-model="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model="n2">
<input type="button" value="=" @click="calc">
<input type="text" v-model="result">
</div>
<script>
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
n1: 0,
n2: 0,
result: 0,
opt: '+'
},
methods: {
calc() { // 计算器算数的方法
// 逻辑:
/* switch (this.opt) {
case '+':
this.result = parseInt(this.n1) + parseInt(this.n2)
break;
case '-':
this.result = parseInt(this.n1) - parseInt(this.n2)
break;
case '*':
this.result = parseInt(this.n1) * parseInt(this.n2)
break;
case '/':
this.result = parseInt(this.n1) / parseInt(this.n2)
break;
} */
// 注意:这是投机取巧的方式,正式开发中,尽量少用
var codeStr = 'parseInt(this.n1) ' + this.opt + ' parseInt(this.n2)'
this.result = eval(codeStr)
}
}
});
</script>
</body>
</html>
初期效果如下
是不是觉得很难看啊 ?
没关系的。
我们后边学习如何引入 element -ui
就会
高端大气上档次了!
笔者优化版本-引入element-ui
(因个人工作原因,下期尽量更加详细)
这里是对计算的结果进行了展示