Vue 获取数据、事件对象、todolist
vue中在方法里获取data里的msg:this.msg 在微信小程序里this.data.msg
改变data里的msg:this.msg="改变后的msg"
可以通过list.push('数据')往list里面添加数据
事件对象
在执行方法的时候传入$event
Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用,函数不会在事件发生前被执行!
可以获取坐标自定义属性获取dom等等
结合双向数据绑定实现todolist
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <input type="text" v-model="todo" @keydown='todoadd($event)'/> 2 <button @click="todoadda()">增加</button> 3 <br> 4 <hr> 5 <h2>进行中</h2> 6 <ul> 7 <li v-for="f,key in list4" v-if="!f.checked"> 8 <input type="checkbox" v-model="f.checked" @change="asd" > {{f.title}} ---- <button @click="remvdata(key)">删除</button> 9 </li> 10 </ul> 11 <br> 12 <h2>已完成</h2> 13 <ul> 14 <li class="abde" v-for="f,key in list4" v-if="f.checked"> 15 <input type="checkbox" v-model="f.checked" @change="asd" > {{f.title}} ---- <button @click="remvdata(key)">删除</button> 16 </li> 17 </ul>
data() { /*业务逻辑里面定义的数据*/ return { list4: [], },mounted() { //生命周期函数!! var list4 = JSON.parse(localStorage.getItem("list4")); if (list4) { this.list4 = list4; } },methods: { //里面写方法 asd() { localStorage.setItem("list4", JSON.stringify(this.list4)); }, todoadda() { this.list4.push({ title: this.todo, checked: false }); this.todo = ""; localStorage.setItem("list4", JSON.stringify(this.list4)); }, todoadd(c) { if (c.keyCode == 13) { this.list4.push({ title: this.todo, checked: false }); this.todo = ""; localStorage.setItem("list4", JSON.stringify(this.list4)); } }, remvdata(key) { this.list4.splice(key, 1); localStorage.setItem("list4", JSON.stringify(this.list4)); },