今天看了一会儿Vue文档,写一个猜大小的小游戏,大概这个丑样:
长这样
头部导入一下Vue.js
代码
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>猜大小</title>
</head>
主体部分包含
<div id="guess">
<h1>猜大小游戏</h1>
{{info}}
<br>
<input v-model="num1" v-show="input_status" :disabled="isdisabled">
<button @click="playGame" v-show="hidden_status">
{{message}}
</button>
<ul>
<li v-for="info_ in info_list">
第{{info_.id}}次猜数字,输入了<span>「{{info_.num}}」</span>,提示:{{info_.text}}
</li>
</ul>
</div>
<script src="index.js"></script>
{{info}}
等{{xxx}}
的部分会被js中的内容渲染v-model="num1"
表示输入框关联一下num1v-show
决定元素是否显示:xxx
是v-bind:
的简写:disabled
表示的是可编辑状态由变量isdisabled
决定@xxx
是v-on
的简写@click="playGame"
表示,鼠标点击操作会触发playGame
函数v-for
是循环增加无序标签li,答应游戏日志看页面就知道,css瞎写的
html, body {
margin: 5px;
padding: 0;
}
changed_num()
函数info_list
,然后被展示到无序序列里面,有几种状态:(this.num1 == item.num)
,只有没有输入过的数字的信息,才会被打印到日志中var item = 0;
var guess_num = new Vue({
el: "#guess",
data: {
num: '',
num1: '',
info: "请按「开始游戏」开始猜数字游戏",
hidden_status: true,
input_status: false,
message: '开始',
isdisabled: false,
info_list: []
},
watch: {
num1: function (newNum1, oldNum1) {
this.info = '开始比较';
guess_num.changed_num()
}
},
created: function () {
this.num = Math.floor(Math.random() * 100 + 1);
},
methods: {
changed_num: function () {
var regNeg = /[0-9]*/;
let flag = true;
if (this.num1 == this.num) {
this.info = '你猜对了!';
this.hidden_status = true;
this.isdisabled = true;
} else if (this.num1 == '') {
flag = false;
this.info = '请输入一个小于100整数';
} else if (this.num1 > 100) {
this.info = '请输入一个小于100的值';
} else if (this.num1 > this.num) {
this.info = '你输入的数字比要猜的数字大';
} else if (!regNeg.test(self.num1)) {
this.info = '请输入一个整数数字';
} else {
this.info = '你输入的数字比要猜的数字小';
}
this.info_list.forEach(item => {
if (this.num1 == item.num) {
flag = false
}
});
if (flag) {
item++;
this.info_list.push({id: item, num: this.num1, text: this.info});
}
},
playGame: function () {
this.message = "重新开始";
this.hidden_status = false;
this.input_status = true;
this.isdisabled = false;
this.num1 = '';
item = 0;
self.info = '请输入数字';
this.info_list = [];
this.num = Math.floor(Math.random() * 100 + 1);
}
},
})
;