Vue3 #2

1.Data：

<p>{{ title }}</p>

   javasrcipt:

data() {
        return {
            title: 'The Final emaper'
        }
}

2.Click events：

<p>{{ age }} - {{ title }}</p>
<button @click="age++">Increase age</button>
<button @click="age--">Decrease age</button>
<button @click="changeTitle">Change title</button>

  javascript:

data() {
        return {
            age: 45,
　　　　　　　title: 'The Final emaper'
        }
  },

  methods: {

        changeTitle() {

            this.title = 'Words of Randiance'

        }

    }

  ps: @click=" " 的另一种写法：

<button @click="changeTitle('Randiance')">Change title</button>

 

methods: {
        changeTitle(title) {
            this.title = title
        }
    }

3.v-if：

<div id="app">
        <div v-if="showBooks">
            <p>{{ title }} - {{ author }} - {{ age }}</p>
            <button @click="age++">Increase age</button>
            <button @click="age--">Decrease age</button>
            <button @click="changeTitle">Change title</button>
        </div>
        <button @click="toggleShowBooks">
            <span v-if="showBooks">Hide books</span>
            <span v-if="!showBooks">Show books</span>    //另一种写法：<span v-else>Show books</span>
        </button>
</div>

  javascript:

data() {
        return {
            showBooks: true,
            title: 'The Final emaper',
            author: 'Brandon Net',
            age: 45
        }
    },
methods: {
        changeTitle() {
            this.title = 'Words of Randiance'
        },
        toggleShowBooks() {
            this.showBooks = !this.showBooks
        }
    }