闪光灯相关代码

freshfox

于 2022-08-19 17:19:12 发布

阅读量365

点赞数

分类专栏： js 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/freshfox/article/details/89244578

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这个博客展示了如何使用Vue.js创建一个动态列表，包括添加、删除和存储应用程序列表到本地存储。通过`v-for`指令遍历列表并触发`@click`事件进行操作，同时利用`uni.setStorageSync`和`uni.getStorageSync`进行数据持久化。此外，还包含了输入验证和模态对话框来确认删除操作。

摘要由CSDN通过智能技术生成

<template>
	<view class=" ">

		<view class="flex align-center   w-100 mx-4 my-5" v-for="(item,index) in appList" @click="del(index)"> {{item}}
		</view>


		<input type="text" value="" v-model="appname" />
	<button @click="add"> add</button>
		<button @click="save">save</button>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				time: '',
				index: 4,
				appList: [],
				appname: ''
			}
		},
		onLoad() {


			// this.testList()
			// this.testtime()
			// this.testStore()
			this.init()
		},
		methods: {
			
			init(){
					let bb = uni.getStorageSync('appList')
					if (bb){
						this.appList = JSON.parse(bb)
					}
			},

			add() {
				
				if (this.appname == '') return 
				if(this.isAppNameInList(this.appname)) return 
				console.log(this.appname)
				this.appList.push(this.appname)
				this.appname = ''
			},
			save() {
				uni.setStorageSync('appList', JSON.stringify(this.appList))
			},

			del(e) {
				console.log(e)
				uni.showModal({
					title: '是否删除',
					content: this.appList[e],

					success: res => {
						if (res.confirm) {
							console.log('click confi')
							this.appList.splice(e, 1)
							console.log("now is " + JSON.stringify(this.appList))
						} else {
							console.log("click cancle")
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			
			isAppNameInList(name){
				if(this.appList.indexOf(name) != -1){
					return true
				}
				else {
					return false
				}
			},


			testStore() {
				let aa = uni.setStorageSync('appList', JSON.stringify(this.appList))

				let bb = uni.getStorageSync('appList')
				// console.log(bb)
			},



			testList() {
				let list1 = ['111', '222', '333']
				let id = '222'

				// console.log(list1.indexOf('22'))


				if (list1.indexOf(id) != -1) {
					console.log(' id in list ')
				}
			},
			testtime() {
				this.time = setInterval(() => {
					// console.log('xxx')

					if (this.index === 0) {
						clearInterval(this.time)
					} else if (this.index % 2 === 0) {
						console.log("open ")
					} else {
						console.log("close")
					}
					this.index = this.index - 1

				}, 1000)

			}

		}
	}
</script>

<style>
	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>