项目灵感来自“聆听远方”的毒鸡汤 非常简单 适合 Vue 新童鞋
按国际惯例 先上图
来不及解释了 快把代码复制走
poison-soup.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/[email protected]/dist/vue.global.js"></script>
<script src="/poison-soup.js"></script>
</body>
</html>
poison-soup.js
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")
壮士 来完一碗“文章” 再来一碗“视频”
标签：Vue,鸡汤,sentence,壮士,一碗,sentences,getRandomIndex From： https://blog.csdn.net/huajianketang/article/details/141350992