自助建站系统官方版,学网页设计大概需要多少钱?,做游戏交易网站,广西莲城建设集团有限公司网站文章目录 渲染对象、实现统计功能实现删除功能设置发布按钮实现发布按钮的提交功能 直接用CSS的模板#xff0c;模板代码如下#xff1a;
templateview classtitle近期热梗/viewview classout view class模板代码如下
templateview classtitle近期热梗/viewview classout view classlistview classrow v-for(item,index) in 3 :keyindexview classtext{{index1}}. 标题文字演示/viewview classcloseicon typeclear size26//view/view/view view classcount共3条梗/view view classcommentinput typetext placeholder请输入热梗.../ button sizemini typeprimary disabled 发布/button/view/view
/templatescript setup
import {ref} from vue;
const lists ref([{id:111,title:刚满18岁},{id:222,title:我不吃牛肉},{id:333,title:遥遥领先},{id:444,title:哪里贵了}
])
/scriptstyle langscss scoped
.title{font-size: 26px;text-align: center;color:#3c3c3c;padding:30px 0 15px;
}
.out{width: 90vw;margin:15px auto;box-shadow: 0 10px 20px rgba(0,0,0,0.1);border-radius: 5px;padding:15px;box-sizing: border-box;.list{.row{padding:10px 0;border-bottom:1px solid #e8e8e8;display: flex;justify-content: space-between;align-items: center;font-size: 18px;color:#333;.text{padding-right: 5px;box-sizing: border-box;}}}.count{padding:10px 0;font-size: 15px;color:#888;text-align:center;}.comment{display: flex;margin-top:10px;input{flex:4;background: #f4f4f4;margin-right: 5px;height: 100%; height: 32px;border-radius: 4px;padding:0 10px;color:#333;}button{flex:1; }}
}/style
这是整体页面效果 我们要实现这样一些功能
让列表下的“共3条梗”实现统计功能。点击每条热梗后的叉能够实现删除功能。实现发布按钮的功能。能够发布热梗发布后的热梗直接追加在列表后。
渲染对象、实现统计功能
模板中的script中定义了对象先把对象渲染出来然后让梗实现统计功能让它等于数组lists的长度代码如下
templateview classtitle近期热梗/viewview classout view classlistview classrow v-for(item,index) in lists :keyindexview classtext{{index1}}. {{item.title}}/viewview classcloseicon typeclear size26//view/view/view view classcount共{{lists.length}}条梗/view view classcommentinput typetext placeholder请输入热梗.../ button sizemini typeprimary disabled 发布/button/view/view
/templatescript setup
import {ref} from vue;
const lists ref([{id:111,title:刚满18岁},{id:222,title:我不吃牛肉},{id:333,title:遥遥领先},{id:444,title:哪里贵了}
])
/scriptstyle langscss scoped
.title{font-size: 26px;text-align: center;color:#3c3c3c;padding:30px 0 15px;
}
.out{width: 90vw;margin:15px auto;box-shadow: 0 10px 20px rgba(0,0,0,0.1);border-radius: 5px;padding:15px;box-sizing: border-box;.list{.row{padding:10px 0;border-bottom:1px solid #e8e8e8;display: flex;justify-content: space-between;align-items: center;font-size: 18px;color:#333;.text{padding-right: 5px;box-sizing: border-box;}}}.count{padding:10px 0;font-size: 15px;color:#888;text-align:center;}.comment{display: flex;margin-top:10px;input{flex:4;background: #f4f4f4;margin-right: 5px;height: 100%; height: 32px;border-radius: 4px;padding:0 10px;color:#333;}button{flex:1; }}
}/style
看看效果
实现删除功能
删除功能的实现先为其加上click事件onClose然后在script中写入函数代码如下
templateview classtitle近期热梗/viewview classout view classlistview classrow v-for(item,index) in lists :keyitem.idview classtext{{index1}}. {{item.title}}/viewview classclose clickonClose(index)icon typeclear size26//view/view/view view classcount共{{lists.length}}条梗/view view classcommentinput typetext placeholder请输入热梗.../ button sizemini typeprimary disabled 发布/button/view/view
/templatescript setup
import {ref} from vue;
const lists ref([{id:111,title:刚满18岁},{id:222,title:我不吃牛肉},{id:333,title:遥遥领先},{id:444,title:哪里贵了}
])
function onClose(index){lists.value.splice(index,1) ;
}
/scriptstyle langscss scoped
.title{font-size: 26px;text-align: center;color:#3c3c3c;padding:30px 0 15px;
}
.out{width: 90vw;margin:15px auto;box-shadow: 0 10px 20px rgba(0,0,0,0.1);border-radius: 5px;padding:15px;box-sizing: border-box;.list{.row{padding:10px 0;border-bottom:1px solid #e8e8e8;display: flex;justify-content: space-between;align-items: center;font-size: 18px;color:#333;.text{padding-right: 5px;box-sizing: border-box;}}}.count{padding:10px 0;font-size: 15px;color:#888;text-align:center;}.comment{display: flex;margin-top:10px;input{flex:4;background: #f4f4f4;margin-right: 5px;height: 100%; height: 32px;border-radius: 4px;padding:0 10px;color:#333;}button{flex:1; }}
}/style
效果如下
设置发布按钮
发布按钮默认是关闭的现在进行设置只要输入框中有内容发布按钮就开启。这里我们通过输入框中的v-model绑定获取数据然后设定没有数据发布按钮保持disable状态代码如下
templateview classtitle近期热梗/viewview classout view classlistview classrow v-for(item,index) in lists :keyitem.idview classtext{{index1}}. {{item.title}}/viewview classclose clickonClose(index)icon typeclear size26//view/view/view view classcount共{{lists.length}}条梗/view view classcommentinput typetext placeholder请输入热梗...v-modeliptvalue / button sizemini typeprimary :disabled !iptvalue.length 发布/button/view/view
/templatescript setup
import {ref} from vue;
const lists ref([{id:111,title:刚满18岁},{id:222,title:我不吃牛肉},{id:333,title:遥遥领先},{id:444,title:哪里贵了}
])
const iptvalue ref() ;
function onClose(index){lists.value.splice(index,1) ;
}
/scriptstyle langscss scoped
.title{font-size: 26px;text-align: center;color:#3c3c3c;padding:30px 0 15px;
}
.out{width: 90vw;margin:15px auto;box-shadow: 0 10px 20px rgba(0,0,0,0.1);border-radius: 5px;padding:15px;box-sizing: border-box;.list{.row{padding:10px 0;border-bottom:1px solid #e8e8e8;display: flex;justify-content: space-between;align-items: center;font-size: 18px;color:#333;.text{padding-right: 5px;box-sizing: border-box;}}}.count{padding:10px 0;font-size: 15px;color:#888;text-align:center;}.comment{display: flex;margin-top:10px;input{flex:4;background: #f4f4f4;margin-right: 5px;height: 100%; height: 32px;border-radius: 4px;padding:0 10px;color:#333;}button{flex:1; }}
}/style
实现发布按钮的提交功能
接下来设置点击发布首先设定事件onSubmit然后写入onSubmit函数这里再加上两个功能一个是提交后清除输入框内的内容一个是用confirm事件使敲击回车键具有和点击发布一样的功能代码如下
templateview classtitle近期热梗/viewview classout view classlistview classrow v-for(item,index) in lists :keyitem.idview classtext{{index1}}. {{item.title}}/viewview classclose clickonClose(index)icon typeclear size26//view/view/view view classcount共{{lists.length}}条梗/view view classcommentinput typetext placeholder请输入热梗...v-modeliptvalue confirmonSubmit/ button sizemini typeprimary :disabled !iptvalue.length clickonSubmit发布/button/view/view
/templatescript setup
import {ref} from vue;
const lists ref([{id:111,title:刚满18岁},{id:222,title:我不吃牛肉},{id:333,title:遥遥领先},{id:444,title:哪里贵了}
])
const iptvalue ref() ; //v-model绑定输入框有内容同时会同步到iptvalue
function onClose(index){lists.value.splice(index,1) ;
}
function onSubmit(){lists.value.push({id:Date.now(),title:iptvalue.value}) ;iptvalue.value ;
}
/scriptstyle langscss scoped
.title{font-size: 26px;text-align: center;color:#3c3c3c;padding:30px 0 15px;
}
.out{width: 90vw;margin:15px auto;box-shadow: 0 10px 20px rgba(0,0,0,0.1);border-radius: 5px;padding:15px;box-sizing: border-box;.list{.row{padding:10px 0;border-bottom:1px solid #e8e8e8;display: flex;justify-content: space-between;align-items: center;font-size: 18px;color:#333;.text{padding-right: 5px;box-sizing: border-box;}}}.count{padding:10px 0;font-size: 15px;color:#888;text-align:center;}.comment{display: flex;margin-top:10px;input{flex:4;background: #f4f4f4;margin-right: 5px;height: 100%; height: 32px;border-radius: 4px;padding:0 10px;color:#333;}button{flex:1; }}
}/style
效果如下
