Vue学习-单选全选的示例

平时开发过程中，经常用到单选和全选的情况，现将示例保留，供以后查阅，该示例取自于TODOMVC示例：

HTML中部分代码：

<section class="todoapp" id="todoapp">
 <header class="header">
  <h1>todos</h1>
  <!-- 添加任务， -->
  <input
    @keyup.enter="addItem"
    class="new-todo" placeholder="What needs to be done?" v-app-focus>
 </header>
 <!-- This section should be hidden by default and shown when there are todos -->
 <!-- items.length 当值为0时，表示false，则不显示 -->
 <!-- template元素，页面渲染之后这个template元素就不会有
  ，需要使用 v-if 与 template搭配，如果使用v-show是不行的 -->
 <template v-if="items.length">
  <section class="main" >
   <input v-model="toggleAll" id="toggle-all" class="toggle-all" type="checkbox">
   <label for="toggle-all">Mark all as complete</label>
   <ul class="todo-list">
    <!-- These are here just to show the structure of the list items -->
    <!-- List items should get the class `editing` when editing and `completed`
          when marked as completed -->
    <li v-for="(item, index) in filterItems" :class="{completed: item.completed, editing: item === currentItem}">
     <div class="view">
      <input class="toggle" type="checkbox" v-model="item.completed">
      <label @dblclick="toEdit(item)">{{item.content}}</label>
      <button class="destroy" :value="item.id" @click="removeItem(index)"></button>
     </div>
     <input  v-todo-focus="item === currentItem" @keyup.enter="finishEdit(item, index, $event)" @blur="finishEdit(item, index, $event)"
         @keyup.esc="cancelEdit" class="edit" :value="item.content">
    </li>
   </ul>
  </section>
  <!-- This footer should hidden by default and shown when there are todos -->
  <!-- items.length 当值为0时，表示false，则不显示 -->
  <footer class="footer"  >
   <!-- This should be `0 items left` by default -->
   <span class="todo-count"><strong>{{remaining}}</strong> item{{ remaining === 1 ? '' : 's' }} left</span>
   <!-- Remove this if you don't implement routing -->
   <ul class="filters">
    <li>
     <a :class="{selected: filterStatus === 'all'}" href="#/">All</a>
    </li>
    <li>
     <a :class="{selected: filterStatus === 'active'}" href="#/active">Active</a>
    </li>
    <li>
     <a :class="{selected: filterStatus === 'completed'}" href="#/completed">Completed</a>
    </li>
   </ul>
   <!-- Hidden if no completed items are left ↓ -->

   <!-- 当总任务数 大于 未完成任务数量 ，则显示下面按钮 -->
   <button v-show="items.length > remaining"
       @click="removeCompleted" class="clear-completed">Clear completed</button>
  </footer>
 </template>
</section>

js代码：

var app = new Vue({
 el: '#todoapp',
 data: {
  //items,   // 对象属性简写，等价于items: items
  items: itemStorage.fetch(), //获取本地数据进行初始化
  currentItem: null, //上面不要少了逗号，接收当前点击的任务项
  filterStatus: 'all' // 上面不要少了逗号，接收变化的状态值
 },

 // 监听器
 watch: {
  // 如果 items 发生改变，这个函数就会运行
  items: {
   deep: true, // 发现对象内部值的变化, 要在选项参数中指定 deep: true。
   handler: function(newItems, oldItems) {
    //本地进行存储
    itemStorage.save(newItems)
   }
  }
 },

 //自定义局部指令
 directives : {
  'todo-focus': { //注意指令名称
   update (el, binding) {
    //只有双击的那个元素才会获取焦点
    if(binding.value) {
     el.focus()
    }
   }
  }
 },

 // 定义计算属性选项
 computed: {
  // 过滤出不同状态数据
  filterItems () {
   //this.filterStatus 作为条件，变化后过滤不同数据
   switch (this.filterStatus) {
    case "active": // 过滤出未完成的数据
     return this.items.filter( item => !item.completed)
     break
    case "completed": // 过滤出已完成的数据
     return this.items.filter( item => item.completed)
     break
    default: // 其他，返回所有数据
     return this.items
   }
  },
  // 复选框计算属性
  toggleAll : {
   get () { //等价于 get : functon () {...}
    console.log(this.remaining)
    //2. 当 this.remaining 发生变化后，会触发该方法运行
    // 当所有未完成任务数为 0 , 表示全部完成, 则返回 true 让复选框选中
    //反之就 false 不选中
    return this.remaining === 0
   },
   set (newStatus) {
    // console.log(newStatus)
    //1. 当点击 checkbox 复选框后状态变化后，就会触发该方法运行,
    // 迭代出数组每个元素,把当前状态值赋给每个元素的 completed
    this.items.forEach((item) => {
     item.completed = newStatus
    })
   }
  },
  // 过滤出所有未完成的任务项
  remaining () {
   /*
         return this.items.filter(function (item) {
             return !item.completed
         }).length
         */
   //ES6 箭头函数
   return this.items.filter(item => !item.completed).length
  }
 }, // **注意** 后面不要少了逗号 ，

 methods: {
  //编辑完成
  finishEdit (item, index, event) {
   const content = event.target.value.trim();
   // 1. 如果为空, 则进行删除任务项
   if (!event.target.value.trim()){
    //重用 removeItem 函数进行删除
    this.removeItem(index)
    return
   }
   // 2. 添加数据到任务项中
   item.content = content
   // 3. 移除 .editing 样式
   this.currentItem = null
  },

  //取消编辑
  cancelEdit () {
   // 移除样式
   this.currentItem = null
  },

  // 进入编辑状态,当前点击的任务项item赋值currentItem，用于页面判断显示 .editing
  toEdit (item) {
   this.currentItem = item
  },
  //移除所有已完成任务项
  removeCompleted () {
   // 过滤出所有未完成的任务，重新赋值数组即可
   this.items = this.items.filter(item => !item.completed)
  },

  // 移除任务项
  removeItem (index) {
   // 移除索引为index的一条记录
   this.items.splice(index, 1)
  },

  //增加任务项
  addItem (event) { //对象属性函数简写，等价于addItem: function () {
   console.log('addItem', event.target.value)
   //1. 获取文本框输入的数据
   const content = event.target.value.trim()
   //2. 判断数据如果为空，则什么都不做
   if (!content.length) {
    return
   }
   //3.如果不为空，则添加到数组中
   //  生成id值
   const id = this.items.length + 1
   //  添加到数组中
   this.items.push({
    id, //等价于 id:id
    content,
    completed: false
   })
   //4. 清空文本框内容
   event.target.value = ''
  }
 }
})