v-model 数据双向绑定
v-model只能在表单元素中使用
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<div id="app">
<label>v-bind绑定</label>
<input type="text" v-bind:value="msg">
<!-- v-bind绑定只读取data中的数据，data中的数据改变标签的数据也改变 -->
<br />
<label>v-model绑定</label>
<input type="text" v-model:value="msg">
<!-- v-model实现双向绑定，标签中的值和data中的值同步 -->
<!-- v-model只能在表单元素中使用 -->
</div>
<body>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "123"
},
method: {}
});
</script>
</html>
简易计算器实例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<div id="app">
<input type="text" v-model:value="arg1">
<select name="" id="" v-model:value="arg2">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model:value="arg3">
<input type="button" value="=" @click="comput">
<input type="text" v-model:value="result">
</div>
<body>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
arg1: "",
arg2: "+",
arg3: "",
result: ""
},
methods: {
comput() {
let code = this.arg1 + this.arg2 + this.arg3;
this.result = eval(code).toFixed(2);
}
}
});
</script>
</html>