Vue页面功能设计:随机生成一句名言或者励志的话

这篇具有很好参考价值的文章主要介绍了Vue页面功能设计:随机生成一句名言或者励志的话。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

最近在写自己的项目,发现脚注不知道写什么好。思来想去,反正是自己的写着玩的项目,没必要搞什么备案号之类的。倒不如每次加载页面的时候,随机生成一句名言或者励志的话激励自己。

代码实现

关于这种的功能实现,其实有很多种。我举两个很经典的实现方式

请求开源接口(网站)

比说每次请求开源的接口或者API,现在有很多类似的接口。我们访问该url就会随机生成一句话

比如这个:

Vue页面功能设计:随机生成一句名言或者励志的话

Vue页面功能设计:随机生成一句名言或者励志的话

Vue页面功能设计:随机生成一句名言或者励志的话

这种的虽然简单方便,但是也有一个致命的缺点,那就是虽然是开源的,但是保不准那天这个接口或者url就不能访问了,比如我之前收藏的这类网址:

Vue页面功能设计:随机生成一句名言或者励志的话

我之前记得明明是可以用的,过了一个月再看已经不行了,所以大家选择的时候尽量选择一些正轨的或者知名的网站。这样才能保证稳定性。

这里我顺便给大家提供一些我个人觉得好使类似的网站吧:

https://developer.hitokoto.cn/sentence/demo.html

https://api.quotable.io/random

封装数组

这种方式稍微有点笨重,但是精度更高,我们可以创建一个数组。然后里面放的都是我们自己喜欢的一些名言诗句,这样不管随机出哪个,都符合我们的口味。

代码实现

代码实现起来特别简单

文本占位符(插值语法)

首先给要展示的地方做一个占位符,方便我们使用插值语法替换成我们随机生成的句子。

Vue页面功能设计:随机生成一句名言或者励志的话

创建数组

然后创建数组,并且塞进自己喜欢的句子,这里我为了方便区分多少条句子,每条句子都是开始用了序号。结束则是用了句号。这样的设计是为了我方便使用随机数区分每条句子

var footerContextList = "0.条条大路通罗马。1.有得有失,才是人生,切忌忿忿不平。2.你为了爱所做的一切,不应该只是单方面的牺牲;而是你也要发自内心地快乐,因为真正爱你的人,一定会想办法让你过得更快乐。3.我从不担心我努力了不优秀,只担心优秀的人都比我更努力。4.人都有自己的做人之志和生存之道,最终归结为道德底线。5.我觉得坦途在前,人又何必因了一点小障碍而不走路呢。6.如果有一天他们不能在一起,不是他太坏,而是她太好。7.凡是有良好教养的人有一禁诫:勿发脾气。8.志在山顶的人,不会贪念山腰的风景。9.今天应做的事没有做,明天再早也是耽误了。10.如果人没有错误,那铅笔还用橡皮干什么。11.孤独不是给别人机会来可怜你,而是给你机会发现更强大的自己。12.自信是成功的第一秘诀。13.富人靠资本赚钱,穷人靠知识致富。14.只要充分相信自己,没有什么困难可以足够持久。15.生活坏到一定程度就会好起来,因为它无法更坏。16.宽恕节省了生气的开支,憎恨的代价,以及能量的浪费。17.拥有青春,就拥有了一份潇洒和风流;拥有青春,就拥有了一份灿烂和微笑。18.你应感谢每位让你蜕变的人无论方式的好坏。19.诚实是成功者最珍贵的品格。20.世界上没有强大的敌人,只有不够强大的自己。21.知识是上帝付与给你去雕琢的宝石。22.当你说离开是为了不让对方受到伤害的时候,你已经给对方造成了最大的伤害。23.死亡教会人一切,如同考试之后公布的结果――虽然恍然大悟,但为时晚矣。24.时刻回想自己有什么,想要什么,自己为此做了什么。25.我一无所有,这意味着我拥有无限可能。26.亲爱的,请给这段爱一个开始,我会用心去写下属于我们的故事。27.胜利是不会向我们走来的,我必须自己走向胜利。28.把一切平凡的事做好就不平凡;把一切简单的事做好就不简单。29.刘翔永远是我们心目中的飞人,中国的骄傲,真正的赢家,支持刘翔的送鲜花。30.白天对于懒惰者等于黑夜,黑夜对于勤奋者来说等于白天。31.人只要不失去方向,就不会失去自己。32.小提琴即使断了一根弦,其余的三根弦还是要继续演奏,这就是人生。33.生活就像一杯浓酒,不经三番五次的提炼,就不会这样可口!34.路在自己脚下,没有人可以决定你的方向。35.现实的城市犹如雾中的风景,隐隐地散发着忧郁的美,承载着没有承诺的梦。36.也许所谓的幸福结局,就是抱着永不放弃的希望,继续前行。37.莎士比亚说:我们这个年纪有爱却没有未来。38.一切幸福都并非没有烦恼,而一切逆境也绝非没有希望。39.不嫉妒别人,不封闭自己,人才会大气,人大气了,天地才会变得宽广。40.每一种取舍都有不同的终局,就如走不同的路就会有不同的景致,所以,假如想看残酷的风景,不妨沉思片刻再做决定。";

然后就可以使用随机数分割句子,提取出每一个单独的句子了

 //生成随机励志句 
        getOneGreatWord(){ 
          var footerContextList = "xxx";
          //生成随机数 0-40 
          var $num = Math.round(Math.random()*40);
          var $rows = footerContextList.split("。"); 
          var start = $rows[$num-1].indexOf('.'); 
          var result = $rows[$num-1].substring(start+1); 
          return  result; 
        },
调用函数,替换占位符

我们把上述逻辑封装成函数,然后在页面加载的事宜被调用,并且把结果赋给变量即可

Vue页面功能设计:随机生成一句名言或者励志的话

完整代码如下:

<template>
   <div>
     <p class="footer">{{footerContext}}</p>
   </div>
</template>

<script>
export default {
    name:'Footer',
    data() {
      return {
        footerContext:'', // 随机生成的句子
        styleObj:{
          marginTop:'2px'
        }
      }
   },
    methods:{
      //生成随机励志句 
        getOneGreatWord(){ 
          var footerContextList = "xxxx";
          //生成随机数 0-40 
          var $num = Math.round(Math.random()*40);
          var $rows = footerContextList.split("。"); 
          var start = $rows[$num-1].indexOf('.'); 
          var result = $rows[$num-1].substring(start+1); 
          return  result; 
        },
    },
    mounted() {
      this.footerContext=this.getOneGreatWord()
    },    
}
</script>

<style>
  .footer{
    margin-top: -2px;
    color: rgb(255, 0, 119);
  }
</style>
简写形式

差个题外话,其实可以简写,不需要专门生命变量在页面加载的时候使用钩子函数绑定,可以直接使用插值语法对应函数:

Vue页面功能设计:随机生成一句名言或者励志的话

这样简化后的代码就是这样的:

<template>
   <div>
     <p class="footer">{{getOneGreatWord()}}</p>
   </div>
</template>

<script>
export default {
    name:'Footer',
    methods:{
      //生成随机励志句 
        getOneGreatWord(){ 
          var footerContextList = "xxx";
          //生成随机数 0-40 
          var $num = Math.round(Math.random()*40);
          var $rows = footerContextList.split("。"); 
          var start = $rows[$num-1].indexOf('.'); 
          var result = $rows[$num-1].substring(start+1); 
          return  result; 
        },
    },
}
</script>

<style>
  .footer{
    margin-top: -2px;
    color: rgb(255, 0, 119);
  }
</style>

查看效果

这样代码就写完了,自己加点小样式,就了可以查看效果

Vue页面功能设计:随机生成一句名言或者励志的话

刷新页面

Vue页面功能设计:随机生成一句名言或者励志的话

这样就实现了我的需求

总结

这样的小功能实现起来还挺有意思的,如果您有更好的方式实现,欢迎留下评论文章来源地址https://www.toymoban.com/news/detail-464441.html

到了这里,关于Vue页面功能设计:随机生成一句名言或者励志的话的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包