鞏固提升前面學習的知識點,主要涉及下面這方面的運用：

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("")