- <template>
- <div id="app">
- <input type="text" v-model='todo' @keydown="doAdd($event)" />
- <br>
- <hr>
- <br>
- <h2 > 进行中 </h2>
- <ul>
- <li v-for="(item,key) in list" v-if="!item.checked">
- <input type="checkbox" v-model='item.checked'> {{item.title}} ---- <button @click="removeData(key)"> 删除 </button>
- </li>
- </ul>
- <br>
- <h2 > 已完成 </h2>
- <ul class="finish">
- <li v-for="(item,key) in list" v-if="item.checked">
- <input type="checkbox" v-model='item.checked'> {{item.title}} ----<button @click="removeData(key)"> 删除 </button>
- </li>
- </ul>
- <h2 v-if='ok'> 这是一个 ok</h2>
- <h2 v-if='!ok'> 这是一个 No</h2>
- <button @click="getList()"> 获取 list 的值 </button>
- </div>
- </template>
- <script>
- /*
- ['录制 nodejs','录制 ionic']
- [
- {
- title:'录制 nodejs',
- checked:true
- },
- {
- title: '录制 ionic',
- checked: false
- }
- ]
- */
- export default {
- data () {
- return {
- ok:false,
- todo:'' ,
- list: [
- {
- title: '录制 nodejs',
- checked: true
- },
- {
- title: '录制 ionic',
- checked: false
- }
- ]
- }
- },
- methods:{
- doAdd(e){
- console.log(e.keyCode)
- if(e.keyCode==13){
- //1, 获取文本框输入的值 2, 把文本框的值 push 到 list 里面
- this.list.push({
- title: this.todo,
- checked: false
- })
- this.todo='';
- }
- },
- removeData(key){
- // alert(key)
- //splice JS 操作数组的方法
- this.list.splice(key,1);
- },
- getList(){
- console.log(this.list)
- }
- }
- }
- </script>
- <style lang="sCSS">
- .finish{
- li{
- background:#eee;
- }
- }
- </style>
来源: http://www.bubuko.com/infodetail-3098018.html