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>
-
表单修饰符
-
number：转化为数值
<input v-model.number="age" type="number"> <button @click='handle'>点击</button> <script> var vm = new Vue({ el: "#app", data: { age: '', }, method: { handle:function(){ console.log(this.age+10) } } }); </script> <!-- 使用<input v-model="age" type="number">输入10时输出为1010 使用<input v-model.number="age" type="number">输入10输出为20 --> -
trim：去掉两端的空格
<input v-model.trim="msg" type="txt"> -
lazy：将input事件切换为change事件
<input v-model.lazy="msg" type="txt"> <!-- 使用lazy后input值改变，data中msg的值不会立即发生改变，而是在失去焦点时才改变 -->
-
简易计算器实例
<!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>