用vue写一套随机生成小说的代码
时间: 2023-05-17 13:03:40 浏览: 66
很高兴为您提供答案。以下是使用 Vue.js 编写的随机生成小说的代码:
<template>
<div>
<h1>{{ title }}</h1>
<p>{{ content }}</p>
<button @click="generateNovel">生成小说</button>
</div>
</template>
<script>
export default {
data() {
return {
title: '',
content: ''
}
},
methods: {
generateNovel() {
// 生成随机标题
const titles = ['红楼梦', '西游记', '水浒传', '三国演义', '金瓶梅']
this.title = titles[Math.floor(Math.random() * titles.length)]
// 生成随机内容
const contents = [
'从前有座山,山上有座庙,庙里有个老和尚和一个小和尚。',
'一只猫咪走在路上,突然看到了一只小老鼠。',
'太阳升起来了,小鸟开始唱歌,花儿也开始绽放。',
'一只小狗在公园里玩耍,它追着一只蝴蝶。',
'小明和小红一起去钓鱼,他们钓到了一条大鱼。'
]
this.content = contents[Math.floor(Math.random() * contents.length)]
}
}
}
</script>
<style>
h1 {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
p {
font-size: 16px;
line-height: 1.5;
margin-bottom: 20px;
}
</style>
请注意,这只是一个简单的示例,您可以根据自己的需求进行修改和扩展。