vue3 学习-初识体验-常见指令v-on和v-if

继续来体验一波数据驱动结合绑定方法的实践案例. 这里以最常见的反转字符串为栗子来体验面向数据编程.

v-on

用来绑定事件的, 然后将方法名写在 methods 中即可.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
  <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
  <div id="root"></div>
  <script>
    Vue.createApp({
      data () {
        return {
          content: "hello, world!"
        }
      },
      // 处理数据的方案都放 methods 中
      methods: {
        btnClick () {
          // 反转字符串
          this.content = this.content.split('').reverse().join('')
        }
      },
      template: `
        <div>
          {{content}}
          <button @click="btnClick">反转</button>
        </div>
        `
    }).mount('#root')
  </script>
</body>
</html>

v-if

条件成立则Dom生效, 不会保留位置哦.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
  <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
  <div id="root"></div>
  <script>
    Vue.createApp({
      data () {
        return { show: true }
      },
      methods: {
        btnClick () {
          this.show = !this.show
        }
      },
      template: `
        <div>
          <span v-if="show">hello, world</span>
          <button @click="btnClick">显示/隐藏</button>
        </div>
        `
    }).mount('#root')
  </script>
</body>
</html>