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("")
相关推荐
九帅羽22 分钟前
uniapp 配置本地 https 开发环境(基于 Vue2 的 uniapp)
网络协议·https·uni-app
一点.点3 小时前
李沐动手深度学习(pycharm中运行笔记)——10.多层感知机+从零实现+简介实现
人工智能·笔记·python·深度学习·pycharm
lqj_本人4 小时前
鸿蒙OS&UniApp 实现的一键清除输入框内容功能#三方框架 #Uniapp
华为·uni-app·harmonyos
武昌库里写JAVA4 小时前
Vue3编译器:静态提升原理
java·开发语言·spring boot·学习·课程设计
Bonnie_12155 小时前
05-jenkins学习之旅-vue前项目部署实践
vue.js·学习·jenkins
moxiaoran57535 小时前
Python学习笔记--Django 表单处理
笔记·python·学习
lqj_本人5 小时前
鸿蒙OS&UniApp 实现动态的 tab 切换效果#三方框架 #Uniapp
华为·uni-app·harmonyos
路过的一个普通人6 小时前
C 语言学习笔记二
c语言·笔记·学习
LearnTech_1237 小时前
【学习笔记】GitLab 下载安装与配置
笔记·学习·gitlab
海尔辛7 小时前
知道Metasploit 吗?
网络·学习·测试工具·metasploit