深圳网站设计要点莱州网站设计

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

1.v-for运用; 

2.v-model双向绑定；

3.@confirm确认事件；

4.@click点击事件；

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

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

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

8.插值表达式。

下面来看具体代码：

<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元素通过

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

往集合追加元素 

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

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

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

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

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

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

v-model双向数据绑定

<input type="text"  placeholder="请输入热梗..."v-model="iptValue" @confirm="onSubmit" />    # js
const iptValue=ref("")