VUE的 todolist
先解释一下：这就是一个简单的应用，获取数据后对数据的一个处理，利用双向绑定原理，更改值与状态。即 mvvm 的 一个最简单的实例
<template>
<div id="app">
<h3>
添加事件 <input type="text" v-model="msg2" @keydown="abc($event)">
</h3>
<hr>
<h3>未完成完成</h3>
<ul>
<li v-for="(item,key) in lmarr" v-if="!item.checked">
<input type="checkbox" v-model="item.checked"> <span>{{item.name}}</span>
</li>
</ul>
<hr>
<h3>已完成</h3>
<ul>
<li v-for="(item,key) in lmarr" v-if="item.checked">
<input type="checkbox" v-model="item.checked">
<span>{{item.name}}</span>
<button @click="del(key)">点击删除</button>
</li>
</ul>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
data(){
return {
msg2:''
,laomo:'<h2>apppppp<h2>'
,arr:['one','two','three']
,lmtitle:'这是一个title的值'
,lmarr : [
{checked:'true','name':'初始数据1'}
,{checked:'','name':'初始数据2'}
]
,seen:false
}
}
,methods:{
abc(e) {
if(e.keyCode==13){
let j ={checked:'','name':this.msg2}
this.lmarr.push(j)
this.msg2 = ''
}
}
,del(e){
this.lmarr.splice(e,1)
}
}
,name: 'app',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.red{
color:red;
}
.blue{
color:blue;
}
</style>
页:
[1]