vuejs小例子之记事本
发布时间:2020-12-16 23:02:40 所属栏目:百科 来源:网络整理
导读:html head script src ="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" / script style #app { margin: 0px auto; width: 500px; border: 1px solid blue; height: 500px; } .title { line-height: 50px; text-align: center; height: 50px; font-weight:
<html> head> script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></scriptstyle> #app { margin: 0px auto; width: 500px; border: 1px solid blue; height: 500px; } .title { line-height: 50px; text-align: center; height: 50px; font-weight: 20px; font-size: 36px; background: coral; } .inp { outline-style: none; border: 0px solid #ccc; width: 330px; font-size: 15px; padding: 3px 3px; font-family: "Microsoft soft"; } input:focus { border-color: #66afe9; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0,.075),0 0 8px rgba(102,175,233,.6); box-shadow: inset 0 1px 1px rgba(0,.6) } ul,li { padding: 0; margin: 0; list-style: none; } .li-div { text-align: center; border: 3px solid white; } </> bodydiv id="app"> class="title" 记事本 divhr> span> p ="color: chartreuse"请输入内容: input type="text" placeholder="按回车保存" class="inp" v-model="tmp" @keyup.enter="add"p="content"ulli v-for="(item,index) in message"> ="li-div"> >{{index}}label>{{item}}button @click="remove(index)">删除buttonliv-show="message.length>0"="float: left;" 当前记事本记录数:{{message.length}} ="float: right;;"="clear">清空 var app = new Vue({ el: '#app',data: { tmp: "",message: ['今天好开心','今天超级棒','今天美美哒'],},methods: { add: function () { if (this.tmp == null || this.tmp == "") { alert("输入不能为空"); } else { this.message.push(this.tmp); } },remove: function (ind) { var flag = confirm("是否要删除删除" + ind); if (flag == true) { this.message.splice(ind,1); } },clear: function () { this.message = []; },}) > 效果: 在输入框中输入内容并回车: 删除编号为1的数据: 清空记事本: 说明:综合使用了vue.js的多个指令,包括: 使用v-for来显示列表数据。 使用v-on来进行删除和清空操作。 使用v-on进行新增操作,具体是keyup.enter事件。 使用v-model将文本框中的数据和vue-data中的数据进行绑定。 使用v-show根据条件进行显示记录数和清空按钮。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
推荐文章
站长推荐
热点阅读