做网站电话号码,建立一个企业网站需要多少钱,现在做网站一般做多宽,网站模板 缓存商标前言#xff1a;
通过前面几篇的文章的讲解#xff0c;已经学习到了很多的 Vue 指令了#xff0c;那么现在就将学习到的指令利用起来#xff0c;做一个小的 demo。
最终效果图#xff1a; 通过效果图可以发现#xff0c;一共有这几个功能#xff1a;
● 渲染列表
通过前面几篇的文章的讲解已经学习到了很多的 Vue 指令了那么现在就将学习到的指令利用起来做一个小的 demo。
最终效果图 通过效果图可以发现一共有这几个功能
● 渲染列表也就是动态的展示表白的数据。
● 删除功能每条数据后面有一个删除按钮单击即可删除指定数据。
● 添加功能可以输入对应的文字添加到表白列表中。
● 统计清空程序会统计当前表白的条数单击清空按钮会清空所有的表白。 1、渲染列表
这个功能很简单使用 v-for 就可以实现首先需要准备要渲染的元素和数据这里使用一个 list 的装需要渲染的数据每个 list 里面放一个对象对象分别有两个属性id 和 content伪代码实现
ul classdata-list iddataListli classdata-item v-foritem in list :keyitem.idspan classcontent{{ item.content }}/spanbutton classdelete-btn clickdel(item.id)删除/button/li
/ul
scriptconst app new Vue({el: #app,data: {list: [{ id: 1, content: 篮球哥太帅了吧!!! },{ id: 2, content: 我要去篮球哥的心里. }]}}
/script 2、删除功能
删除类似之前写过的音乐清单通过 id进行删除伪代码如下
del (id) {this.list this.list.filter(item item.id ! id)
} 3、添加功能
这里直接往 list 数组中最前面插入一条数据就是此处采取的是 unshift 方法id 使用当前的时间戳表示正常来说这里的数据是通过后端返回的目前为了演示功能暂时先这样写。
add () {this.list.unshift({id: new Date(),content: this.value})// 插入完成后, 清空值this.value
} 4、统计清空
统计只需要统计当前的 list.length 就可以了所以使用差值表达式即可。
divp共 span idcount{{ list.length }}/span 条数据/p/div
清空只需要将 list 等于一个新的空 list 即可。
clear() {this.list []
} 5、完整代码
!DOCTYPE html
html
headtitle表白墙/titlestyle* {margin: 0;padding: 0;}body {background-color: #edecec;}.container {max-width: 600px;margin: 50px auto;padding: 20px;background-color: white;border-radius: 10px;box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);}.container h1 {text-align: center;}.input-container {padding: 20px 0;display: flex;justify-content: space-between;align-items: center;}.input-container input {width: 90%;height: 40px;border: 1px solid black;border-right: none;padding-left: 10px;box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);}.input-container button {width: 10%;height: 41px;border: 1px solid black;border-left: none;cursor: pointer;box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);}.data-list {list-style-type: none;padding: 0;}.data-item {height: 40px;display: flex;justify-content: space-between;align-items: center;margin: 10px 0;background-color: rgb(255, 255, 255);box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);border-radius: 5px;border: 1px solid green;}.content {padding-left: 20px;}.delete-btn {color: #ff0000;border: none;padding: 5px 10px;cursor: pointer;background: none;}.stats {margin-top: 20px;display: flex;justify-content: space-between;}#clearBtn {cursor: pointer;background: none;border: none;}.clear-btn {background-color: #ff0000;color: #fff;border: none;padding: 5px 10px;cursor: pointer;}/style
/head
bodydiv classcontainer idapph1表白墙/h1div classinput-containerinput typetext idmessageInput placeholder输入表白内容 v-modelvaluebutton idaddBtn clickadd()添加/button/divul classdata-list iddataListli classdata-item v-foritem in list :keyitem.idspan classcontent{{ item.content }}/spanbutton classdelete-btn clickdel(item.id)删除/button/li/uldiv classstats v-show list.length 0divp共 span idcount{{ list.length }}/span 条数据/p/divbutton idclearBtn clickclear()清空数据/button/div/div
/body
script srchttps://cdn.jsdelivr.net/npm/vue2.7.14/script
scriptconst app new Vue({el: #app,data: {value: ,list: [{ id: 1, content: 篮球哥太帅了吧!!! },{ id: 2, content: 我要去篮球哥的心里. }]},methods: {del (id) {this.list this.list.filter(item item.id ! id)},add () {this.list.unshift({id: new Date(),content: this.value})// 插入完成后, 清空值this.value },clear() {this.list []}}})
/script
/html对于这个小 demo 需要注意当 list 没有元素的时候是不能展示最下面的统计和清空数据按钮的所以此处采用 v-show 来控制元素的显示和隐藏其他的就是把前面学习的指令给综合起来了这个 demo 没有什么难度重点是练习前面学习的指令建议看完这个功能之后自己能写出来一个类似的这样就能很好的巩固指令的知识点了。
6、更多建议
就业市场的行情愈发严峻对于计算机专业的毕业生和求职者来说找工作似乎变得更加具有挑战性。但别担心机会总是留给有准备的人。
最新招聘可以通过下面小程序获取最新企业招聘信息都是新岗位可内推完善好简历投递可以简历托管让HR主动联系你。加油计算机人未来仍可期
