点击下一条

原创于 2021-07-20 18:13:41 发布 · 208 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #javascript

学习之路专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用Vue.js实现一个动态下拉式轮播，通过点击'点击下一条'按钮，实时切换内容。数据结构巧妙地控制了内容的显示和隐藏，适合初级开发者理解数据驱动开发的基本原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

<view class="content">
		<view class="text-area">
			<button type="primary" @click="next()">点击下一条</button>
		</view>
		<view class="title">{{title}}</view>
</view>

<script>
	export default {
		data() {
			return {
				title: '',
				//设置变量
				num:0,
				index:0,
				//定义的数据
			    numData: ['2021/7/20','今天是周二','天气多云转小雨','心情多云'],
			}
		},
		onLoad() {

		},
		methods: {
		//两种写法 仅供参考
		 next(){
			 this.index = this.num;
			 //点击加1
			 this.num++;
			 //判断点击次数要是等于数据的长度 把num设置成0 在走num+1,就第一条数据重新开始
			 if(this.index === this.numData.length - 1){
				this.num = 0;		
				this.title = this.numData[this.index] 
			 }else{
				this.title = this.numData[this.index] 
			 }
			
		 }
		 // next(){
		 //     this.index = this.num;
		 //     this.num++;
		 //     if(this.index < this.numData.length){
		 //     this.title = this.numData[this.index] 
		 //     }else{
		 //      this.num = 1; 
		 //      this.title = this.numData[0] 
		 //     }
		 //    }
		}
	}
</script>