vue实现todolist单页面应用

刚学习vue的小伙伴不知道从哪入手，很多网上的教程一来就搭建脚手架环境，可以新手更本看不懂，建议还是用引入script的方式引入vue.js，然后看官网的教程，再拿那这个demo练练手，也可以看看官网的demo，然后再去熟悉安装，搭建单页面应用。

效果：

功能：

在input输入文字点击按钮或者enter，下面会添加一个带复选框和文字还有删除按钮的li

用到的vue函数：

页面非常简单：

先写外面的盒子，这里用到v-model双向绑定input的值和js里的inputValue

todolist @H_301_29@ @H_301_29@

然后在js绑定：

@H_301_29@

页面添加ul和button：

todolist

{{item.text}} @H_301_29@

@H_301_29@ @H_301_29@

button的点击事件为methods里的add方法v-for就是遍历items数组，将item的text显示

js里的data要加上items,还要有methods:

@H_301_29@

点击按钮时，就添加input的值到items数组，并重置值。这样view就自动更新li添加一项，因为数据变化页面也会实时更新，vue的好处开始浮现

在li加上checkBox和delete，再给items添加completed这个属性，代表完成没有，使用v-bind：class，意思是item.completed是true，那么就会使用complete这个class，如果false，就没有class，complete这个class我们可以设置字体red，便于识别。

Box" v-model="item.completed">

vue实现todolist单页面应用

效果：

功能：

用到的vue函数：

猜你在找的Vue相关文章