你好! 这是我自己编辑的一些实例。如果你想学习vue的有关实例 可以仔细阅读这篇文章,了解一下关于vue的知识。
vue简易计算器
<!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="vue.js"></script>
</head>
<body>
<div id="root">
第一个数:<input type="text" name="" id="" v-model='num1'>
<select name="" id="" v-model='fc' @click='cli(event)'>
<option v-for='(item,index) in fu' :key='index' :value='index'>{{item}}</option>
</select>
第二个数:<input type="text" name="" id="" v-model='num2'> <button @click='say()'>计算</button>
<p>计算结果为 {{p}}</p>
</div>
<script>
// 初识化vue实例对象
var vue = new Vue({
el: '#root',
data: {
num1: '',
num2: '',
fu: ['+', '-', '*', '/'],
fc: 0,
p: ''
},
methods: {
cli(event) {
this.fc = event.target.value; //获取option对应的value值
},
say() {
var index = this.fc;
// console.log(index);
if (index == 0) {
this.p = parseInt(this.num1) + parseInt(this.num2);
} else if (index == 1) {
this.p = parseInt(this.num1) - parseInt(this.num2);
} else if (index == 2) {
this.p = parseInt(this.num1) * parseInt(this.num2);
} else {
this.p = parseInt(this.num1) / parseInt(this.num2);
}
}
}
});
</script>
</body>
</html>
实例: