<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>compare</title>
</head>
<style>
body {
background-color: antiquewhite;
}
.input {
font-size: 20px;
}
#app {
width: 800px;
height: 400px;
background-color: pink;
margin: 0 auto;
}
#result {
height: 155px;
width: 800px;
background-color: white;
}
</style>
<body>
<div id="app">
<input type="text" v-model="data1" placeholder="please input data1" class="input">
<input type="text" v-model="data2" placeholder="please input data2" class="input">
<button @click="equals">equals</button>
<p>result:</p>
<p v-text="result" id="result"></p>
</div>
</body>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
data1: '',
data2: '',
result: 'please input correct data to compare'
},
methods: {
equals() {
if (this.data1 > this.data2) {
this.result = "this.data1 > this.data2";
} else if (this.data1 == this.data2) {
this.result = "this.data1 == this.data2";
} else {
this.result = "this.data1 < this.data2";
}
}
}
})
</script>
</html>
Vue.js比较两数大小
于 2023-07-23 11:09:52 首次发布