VUE的 todolist

周大胖子

先解释一下：
这就是一个简单的应用，获取数据后对数据的一个处理，利用双向绑定原理，更改值与状态。即 mvvm 的 一个最简单的实例

1. <template>
2.   <div id="app">
3.       <h3>
4.         添加事件 <input type="text" v-model="msg2" @keydown="abc($event)">
5.       </h3>
6.       <hr>
7.       <h3>未完成完成</h3>
8.       <ul>
9.         <li v-for="(item,key) in lmarr" v-if="!item.checked">
10.           <input type="checkbox" v-model="item.checked"> <span>{{item.name}}</span>
11.         </li>
12.       </ul>
13.       <hr>
14.       <h3>已完成</h3>  
15.       <ul>
16.         <li v-for="(item,key) in lmarr" v-if="item.checked">
17.           <input type="checkbox" v-model="item.checked">
18.           <span>{{item.name}}</span>
19.           <button @click="del(key)">点击删除</button>
20.         </li>
21.       </ul>
23.   </div>
24. </template>
26. <script>
27. import HelloWorld from './components/HelloWorld.vue'
29. export default {
30.   
31.   data(){
32.     return {
33.        msg2:''
34.        ,laomo:'<h2>apppppp<h2>'
35.        ,arr:['one','two','three']
36.        ,lmtitle:'这是一个title的值'
37.        ,lmarr : [
38.          {checked:'true','name':'初始数据1'}
39.          ,{checked:'','name':'初始数据2'}
40.        ]
41.        ,seen:false
42.     }
43.    
44.   }
45.   ,methods:{
46.       abc(e) {
47.         if(e.keyCode==13){
48.           let j =  {checked:'','name':this.msg2}
49.           this.lmarr.push(j)
50.           this.msg2 = ''
51.         }
52.       }
53.       ,del(e){
54.        this.lmarr.splice(e,1)
55.       }
56.   }
57.   ,name: 'app',
58.   components: {
59.     HelloWorld
60.   }
61.   
62. }
63. </script>
65. <style>
66. #app {
67.   font-family: 'Avenir', Helvetica, Arial, sans-serif;
68.   -webkit-font-smoothing: antialiased;
69.   -moz-osx-font-smoothing: grayscale;
70.   text-align: center;
71.   color: #2c3e50;
72.   margin-top: 60px;
73. }
74. .red{
75.   color:red;
76. }
77. .blue{
78.   color:blue;
79. }
80. </style>

复制代码