iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 10
1
Modern Web

Vue.JS且戰且飛系列 第 10

Vue.JS且戰且飛(十)

新增項目&刪除項目

jsfiddle


<html>
<head>
    <meta charset="UTF-8">
    <title>新增項目</title>
</head>
<body>
<div id="app">
  <!-- v-on:動作 = 事件驅動 -->
  <input v-model="newRow" v-on:keyup.enter="addRow">
  <ul>
  <li v-for="(row,index) in rows">
  <span>{{ row.text }}</span>
  <!-- 執行函數 $index = array key -->
  <button v-on:click="removeRow(index)">X</button>
  </li>
  </ul>
</div>
</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            <!-- 輸入預設字元 -->
            newRow: 'Hello ',
            <!-- 預設顯示資料 type array -->
            rows: [{text: 'Hello World!'},
                {text: 'Hello IT Help!'},
                {text: 'Hello Eagle'}
            ]
        },
        <!-- 函數 -->
        methods: {
            addRow: function () {
                <!-- check text is null if null return 0 -->
                var text = this.newRow.trim()
                if (text) {
                    <!-- 新增一筆資料 -->
                    this.rows.push({text: text})
                    <!-- 輸入預設字元 -->
                    this.newRow = 'Hello '
                }
            },
            removeRow: function (index) {
                <!-- 使用array key刪除資料 -->
                this.rows.splice(index, 1)
            }
        }
    })
</script>
</html>

上一篇
Vue.JS且戰且飛(九)
下一篇
Vue.JS且戰且飛(十一)
系列文
Vue.JS且戰且飛30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言