Vue 项目 毒鸡汤 壮士可要来一碗!

2024-08-20 10:25:05 浏览数 (2)

项目灵感来自“聆听远方”的毒鸡汤 非常简单 适合 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")

壮士 来完一碗“文章” 再来一碗“视频”

0 人点赞