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

华健课堂

于 2024-08-20 10:18:18 发布

阅读量148

点赞数 6

文章标签： vue.js 前端 javascript 前端框架

本文链接：https://blog.csdn.net/huajianketang/article/details/141350992

版权

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