wordpress 文章 自定义排序seo的中文含义
巩固提升前面学习的知识点,主要涉及下面这方面的运用：
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("")