计算属性
在vue实例的对象computed中声明一个函数,这个函数的返回值return就是计算属性的属性值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model.number="number1" />
<select v-model="opt" >
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
<input type="text" v-model.number="number2" />
<br />
结果:{{change}}
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
number1:0,
number2:0,
opt:"*",
number3:"",
},
computed:{
change(){
if(this.opt == "+"){
return this.number1+this.number2
}
if(this.opt == "-"){
return this.number1-this.number2
}
if(this.opt == "*"){
return this.number1*this.number2
}
if(this.opt == "/"){
return this.number1/this.number2
}
}
}
})
</script>
</html>
效果图
表达式
使用两个input定义文本输入框,type属性值为text,v-model来绑定数值
<!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>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model.number="number1" />
<select v-model="opt" >
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
<input type="text" v-model.number="number2" />
<button @click="m1" >计算</button>
<br />
<p v-show="xianshi1">{{number1}}+{{number2}}={{number1 + number2}}</p>
<p v-show="xianshi2">{{number1}}-{{number2}}={{number1 - number2}}</p>
<p v-show="xianshi3">{{number1}}*{{number2}}={{number1 * number2}}</p>
<p v-show="xianshi4">{{number1}}/{{number2}}={{number1 / number2}}</p>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
number1:0,
number2:0,
opt:"+",
xianshi1:false,
xianshi2:false,
xianshi3:false,
xianshi4:false
},
methods: {
m1() {
if (this.opt === "+") {
this.xianshi1 = true;
this.xianshi2 = false;
this.xianshi3 = false;
this.xianshi4 = false;
} else if (this.opt === "-") {
this.xianshi1 = false;
this.xianshi2 = true;
this.xianshi3 = false;
this.xianshi4 = false;
} else if (this.opt === "*") {
this.xianshi1 = false;
this.xianshi2 = false;
this.xianshi3 = true;
this.xianshi4 = false;
} else {
this.xianshi1 = false;
this.xianshi2 = false;
this.xianshi3 = false;
this.xianshi4 = true;
}
}
}
})
</script>
</html>
效果图
方法
通过if来判断运算符,通过this来给number3赋值实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model.number="number1" />
<select v-model="opt" >
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
<input type="text" v-model.number="number2" />
<button @click="change" >计算</button>
<br />
结果:<input type="text" v-model="number3" />
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
number1:0,
number2:0,
opt:"*",
number3:"",
},
methods:{
change(){
if(this.opt == "+"){
this.number3 = this.number1+this.number2
}
if(this.opt == "-"){
this.number3 = this.number1-this.number2
}
if(this.opt == "*"){
this.number3 = this.number1*this.number2
}
if(this.opt == "/"){
this.number3 = this.number1/this.number2
}
}
}
})
</script>
</html>
效果图
侦听器
用watch监听data中的某一个数据变化
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<input type="text" v-model.number="number1"/>
<select v-model="opt">
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
<input type="text" v-model.number="number2" />
<br />
结果:{{number3}}
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
number1:0,
number2:0,
opt:"+",
number3:0
},
watch:{
number1(){
if(this.opt == "+"){
this.number3 = this.number1+this.number2
}
if(this.opt == "-"){
this.number3 = this.number1-this.number2
}
if(this.opt == "*"){
this.number3 = this.number1*this.number2
}
if(this.opt == "/"){
this.number3 = this.number1/this.number2
}
},
number2(){
if(this.opt == "+"){
this.number3 = this.number1+this.number2
}
if(this.opt == "-"){
this.number3 = this.number1-this.number2
}
if(this.opt == "*"){
this.number3 = this.number1*this.number2
}
if(this.opt == "/"){
this.number3 = this.number1/this.number2
}
},
opt(){
if(this.opt == "+"){
this.number3 = this.number1+this.number2
}
if(this.opt == "-"){
this.number3 = this.number1-this.number2
}
if(this.opt == "*"){
this.number3 = this.number1*this.number2
}
if(this.opt == "/"){
this.number3 = this.number1/this.number2
}
}
}
})
</script>
</html>
效果图