项目灵感来自“聆听远方”的毒鸡汤 非常简单 适合 Vue 新童鞋
按国际惯例 先上图
来不及解释了 快把代码复制走
poison-soup.html
代码语言:html复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>毒鸡汤 - 壮士可要来一碗!</title>
</head>
<body>
<div id="app">
<h1>毒鸡汤</h1>
<p>{{sentence}}</p>
<button v-on:click="showAnotherSentence">再来一碗</button>
</div>
<script src="https://unpkg.com/vue@3.4.37/dist/vue.global.js"></script>
<script src="/poison-soup.js"></script>
</body>
</html>
poison-soup.js
代码语言:javascript复制let sentences = [
"你连世界都没观过,哪来的世界观?",
"学习使人快乐,不学习使人,更快乐。",
"好想把房子卖了,去环游世界,可惜房东不同意!",
"厉害的不是你有多少后台,而是你能成为多少人的后台!",
"你怎么长得跟个二维码似的,不扫一下,都不知道你是什么东西!",
"不笑运气差,一笑脸就大!",
"少年加油吧!只要你努力工作,你的老板一定会成功的。",
"要相信自己,别人能做到的,你也做不到。",
"你从来不孤独,因为,孤独都不想跟你交朋友。",
"不要担心,一切都是最烂的安排。"
]
function getRandomIndex() {
return Math.floor(Math.random() * sentences.length)
}
Vue.createApp({
data() {
return {
sentence: sentences[getRandomIndex()]
}
},
methods: {
showAnotherSentence() {
this.sentence = sentences[getRandomIndex()]
}
}
}).mount("#app")
壮士 来完一碗“文章” 再来一碗“视频”