大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇“Vue怎么制作Todo List网页”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Vue怎么制作Todo List网页”文章吧。
10年积累的成都做网站、成都网站设计、成都外贸网站建设经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站策划后付款的网站建设流程,更有解放免费网站建设让你可以放心的选择与我们合作。
以下是HTML部分
Vue实例部分
var vm = new Vue({ el: ".main", data: { list:list, things:"", editItem:"", beforeTitle:"", visibility:"all", inputId:"", }, watch:{ list:{ handler:function(){ store.save("todolist",this.list) }, deep:true } }, computed:{ unCheckedLength(){ return this.list.filter(function(item){ return item.isChecked == false }).length }, filteredList(){ return filter[this.visibility] ? filter[this.visibility](this.list) : list } }, methods: { addTodo(ev){ if(this.things !== ""){ var item = { title:this.things, isChecked:false, } this.list.push(item) } this.things = ""; }, deleteTodo(item){ var index = this.list.indexOf(item); this.list.splice(index,1); }, editTodo(item){ this.beforeTitle = item.title; this.editItem = item }, edited(item){ this.editItem = "" }, cancel(item){ item.title = this.beforeTitle; this.editItem = ""; this.beforeTitle = "" } }, directives:{ "focus":{ update(el,binding){ if(binding.value){ el.focus() } } } } });
这是一个基本的Vue实例,el是和DOM元素连接的挂载点,data是代理数据,在DOM的内容中如果要用到代理数据就用{{xxx}}表示,比如{{list}},{{visibility}},而当data中的代理数据出现在DOM标签里的时候就不需要用花括号。
new Vue({ el: ".main", data: { list:list, things:"", editItem:"", beforeTitle:"", visibility:"all", inputId:"", } })
Vue要用大的方法都放在methods部分
methods: { addTodo(ev){ if(this.things !== ""){ var item = { title:this.things, isChecked:false, } this.list.push(item) } this.things = ""; }, deleteTodo(item){ var index = this.list.indexOf(item); this.list.splice(index,1); }, editTodo(item){ this.beforeTitle = item.title; this.editItem = item }, edited(item){ this.editItem = "" }, cancel(item){ item.title = this.beforeTitle; this.editItem = ""; this.beforeTitle = "" } }
还有计算属性
computed:{ unCheckedLength(){ return this.list.filter(function(item){ return item.isChecked == false }).length }, filteredList(){ return filter[this.visibility] ? filter[this.visibility](this.list) : list } }
观察属性
watch:{ list:{ handler:function(){ store.save("todolist",this.list) }, deep:true } }
自定义属性
directives:{ "focus":{ update(el,binding){ if(binding.value){ el.focus() } } } }
以上就是关于“Vue怎么制作Todo List网页”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注创新互联行业资讯频道。