本文实例为大家分享了vue实现记事本功能的具体代码,供大家参考,具体内容如下
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元http-equiv=? type”内容=" text/html;charset=utf - 8”比;
& lt; title>记事本& lt;/title>
& lt;元http-equiv=癤-UA-Compatible”内容=癐E-edge”比;
& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1”比;
& lt;链接rel="样式表" type=" text/css " href=" https://www.yisu.com/zixun/bootstrap-3.3.7-dist/css/bootstrap.min.css " rel=巴獠縩ofollow”比;
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/vue.js "祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div类="容器" id=坝τ谩北?
& lt; div类="行"比;
& lt; div类=癱ol-md-6”比;
& lt; h2类=" text-succeed "在{{标题}}& lt;/h2>
& lt;输入类型=拔谋尽钡拿?拔谋尽闭嘉环?疤钚词挛瘛皏模型=" newThing "/比;
& lt;按钮类型=鞍磁ァ眂lass=癰tn text-active”v:点击=癮ddThing”v: keyup.enter=癮ddThing祝辞添加事务& lt;/button>
& lt;/div>
& lt;/div>
& lt; div类="行"比;
& lt; div类=癱ol-md-3”比;
& lt; div类=八趼酝肌北?
& lt; ul>
& lt;李v=?项目、索引)的事情”class=皌ext-center text-info”v-show=癷tem.show”在{{item.thing}}
& lt;按钮类=" btn btn-default bg-info“v:点击=?”(索引)v模型=爸甘痹谏境? lt;/button> & lt;/li>
& lt;/ul>
& lt;/div>
& lt;/div>
& lt;/div>
& lt;/div>
& lt;/body>
& lt;脚本type=" text/javascript祝辞
var vue=new vue ({
埃尔:“#应用”,
数据:{
标题:“记事本”,
件事:[
{
件事:”,
显示:假
}
]，
newThing:”,
消息:“待填写的事务为空! !”
},
方法:{
addThing:函数(){
如果(this.newThing) {
this.things.splice (0, 0, {
件事:this.newThing,
显示:真
});
this.newThing="
其他}{
警报(this.message)
}
},
5:函数(指数){
this.things(指数),告诉=false
}
}
});
& lt;/script>
& lt;/html>之前
效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
