[Vue] If / For / Event / Model(two-way binding)

條件

• index.html

<div v-if="showHint">看情況顯示文字</div>

• index.js

data: {

    showHint:true

}

source code

迴圈

• index.html

<ul>

    <li v-for="data in dataList">

        {{data.text}}

    </li>

</ul>

• index.js

data: {

    dataList: [

        { text: '第一個項目' },

        { text: '第二個項目' },

        { text: '第三個項目' }

    ]

}

source code

事件綁定

• index.html

<button v-on:click="switchShowHint">開關</button>

*.v-on:事件名稱

• index.js

methods: {

    switchShowHint: function () {

        this.showHint = !this.showHint

    }

}

source code

雙向綁定

事件綁定

• index.html

<input type="text" v-model="title">

*.v-on:事件名稱

• index.js

data: {

    title: 'Hello World'

}

source code