uni-app学习笔记十--vu3综合练习

moxiaoran57532025-05-26 22:16

巩固提升前面学习的知识点,主要涉及下面这方面的运用：

1.v-for运用;

2.v-model双向绑定；

3.@confirm确认事件；

4.@click点击事件；

5.控制按钮的可点击和不可点击；

6.集合删除和追加元素，获取集合元素的个数；

7.函数的另一种声明方式；

8.插值表达式。

下面来看具体代码：

html 复制代码

<template>
	<view class="title">
	    近期热梗
	</view>
	
	<view class="out">	  
	  <view class="list">
	    <view class="row" v-for="(item,index) in lists" :key="item.id">
	      <view class="text">{{index+1}}. {{item.title}}</view>
	      <view class="close" @click="onClose">
	        <icon type="clear" size="26"/>
	      </view>
	    </view>
	  </view>	
	  <view class="count">
	    共{{lists.length}}条梗
	  </view>	
	  <view class="comment">
	    <input type="text" 
	    placeholder="请输入热梗..."
	    v-model="iptValue" @confirm="onSubmit"
	    />    
	    <button size="mini" type="primary" :disabled="iptValue.length<3"  @click="onSubmit" 
	    >发布</button>
	  </view>
	</view>
</template>

<script setup>
import {ref} from "vue";
const lists = ref([
	{id:111,title:"刚满18岁"},
	{id:222,title:"我不吃牛肉"},
	{id:333,title:"遥遥领先"},
	{id:444,title:"哪里贵了"}
])
const onClose=function (index){
	//删除指定索引，删除1个
	lists.value.splice(index,1)
}
const iptValue=ref("")

const onSubmit=function(){
	//往集合追加元素
	lists.value.push({id:Date.now(),title:iptValue.value})
	//清空文本框的值
	iptValue.value=''
}
</script>

删除list元素通过

javascript 复制代码

//删除指定索引，删除1个
lists.value.splice(index,1)

往集合追加元素

javascript 复制代码

lists.value.push({id:Date.now(),title:iptValue.value})

控制按钮的可点击和不可点击

html 复制代码

//当文本框输入的内容长度小于3时不可点击，大于等于3时可点击
:disabled="iptValue.length<3"

@confirm确认事件，电脑上对应为按enter 事件，手机上对应点击确定事件。这里将@confirm和@click绑定到同一事件onSubmit。

v-for的运用，key必须使用唯一识别值，通常使用id来区分加以识别

html 复制代码

v-for="(item,index) in lists" :key="item.id"

v-model双向数据绑定

html 复制代码

<input type="text"  placeholder="请输入热梗..."
  v-model="iptValue" @confirm="onSubmit" />    

# js
const iptValue=ref("")