vue創建事項清單表單代碼



124 495 166



特效描述:vue創建事項 清單表單代碼,vue添加待辦事項列表,創建事項表單ui模板代碼

代碼結構

1. 引入CSS

<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

2. 引入JS

<script src="js/vue.min.js"></script>

3. HTML代碼

<main id="todolist">
  <h1>
   	事項清單
    <span>把事情完成,每次一個項目。</span>
  </h1>
  <template v-if="todo.length">
    <ul>
      <li v-for="item in todoByStatus" stagger="5000" v-bind:class="item.done ? 'done' : ''">
        <span class="label">{{item.label}}</span>
        <div class="actions">
          <button class="btn-picto" type="button" v-on:click="markAsDoneOrUndone(item)" v-bind:aria-label="item.done ? 'Undone' : 'Done'" v-bind:title="item.done ? 'Undone' : 'Done'">
            <i aria-hidden="true" class="material-icons">{{ item.done ? 'check_box' : 'check_box_outline_blank' }}</i>
          </button>
          <button class="btn-picto" type="button" v-on:click="deleteItemFromList(item)" aria-label="Delete" title="Delete">
            <i aria-hidden="true" class="material-icons">刪除</i>
          </button>
        </div>
      </li>
    </ul>
    <togglebutton 
                  label="在最后移動完成的項目?"
                  name="todosort"
                  v-on:clicked="clickontoogle" />
  </template>
  <p v-else class="emptylist"> 你的待辦事項列表是空的。 </p>
  <form name="newform" v-on:submit.prevent="addItem">
    <label for="newitem">添加到待辦事項列表</label>
    <input type="text" name="newitem" id="newitem" v-model="newitem">
    <button type="submit">添加項目</button>
  </form>
</main>
<script>
Vue.component('togglebutton', {
  props: ['label', 'name'],
  template: `<div class="togglebutton-wrapper" v-bind:class="isactive ? 'togglebutton-checked' : ''">
      <label v-bind:for="name">
        <span class="togglebutton-label">{{ label }}</span>
        <span class="tooglebutton-box"></span>
      </label>
      <input v-bind:id="name" type="checkbox" v-bind:name="name" v-model="isactive" v-on:change="onToogle">
  </div>`,
  model: {
    prop: 'checked',
    event: 'change'
  },
  data: function() {
    return {
      isactive:false
    }
  },
  methods: {
    onToogle: function() {
       this.$emit('clicked', this.isactive)
    }
  }
});
var todolist = new Vue({
  el: '#todolist',
  data: {
    newitem:'',
    sortByStatus:false,
    todo: [
      { label: "Learn VueJs", done: true },
      { label: "Code a todo list", done: false },
      { label: "Learn something else", done: false }
    ]
  },
  methods: {
    addItem: function() {
      this.todo.push({label: this.newitem, done: false});
      this.newitem = '';
    },
    markAsDoneOrUndone: function(item) {
      item.done = !item.done;
    },
    deleteItemFromList: function(item) {
      let index = this.todo.indexOf(item)
      this.todo.splice(index, 1);
    },
    clickontoogle: function(active) {
      this.sortByStatus = active;
    }
  },
  computed: {
    todoByStatus: function() {
      if(!this.sortByStatus) {
        return this.todo;
      }
      var sortedArray = []
      var doneArray = this.todo.filter(function(item) { return item.done; });
      var notDoneArray = this.todo.filter(function(item) { return !item.done; });
      sortedArray = [...notDoneArray, ...doneArray];
      return sortedArray;
    }
  }
});</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 切換按鈕 表單 表單美化 表單插件 表單美化插件 文本框 text文本框 復選框 復選按鈕 復選框美化 切換按鈕 按鈕控制 添加刪除
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子