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

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

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("")
相关推荐
胡楚昊4 小时前
B站pwn教程笔记-11
笔记
njsgcs6 小时前
gcn graphsage 视频笔记
笔记
虾球xz6 小时前
CppCon 2016 学习:GAME ENGINE USING C++11
大数据·开发语言·c++·学习
Jet45056 小时前
第100+42步 ChatGPT学习:R语言实现阈值调整
开发语言·学习·chatgpt·r语言
虾球xz6 小时前
CppCon 2016 学习:fixed_point Library
开发语言·c++·学习
HaiQinyanAN7 小时前
【学习笔记】nlohmannjson&&cjson
c++·笔记·学习·json
忘川w8 小时前
网络安全相关知识
笔记·网络安全
寄思~8 小时前
Python学习笔记:错误和异常处理
开发语言·笔记·python·学习
啊哈哈哈哈哈啊哈哈8 小时前
G2打卡——人脸图像生成
pytorch·学习·gan
茯苓gao8 小时前
小孙学变频学习笔记(二)变频器的逆变电路
笔记·嵌入式硬件·学习