vue快速入门(八)绑定方法

注释很详细,直接上代码

上一篇·

新增内容

  1. v-if与button响应回顾
  2. 事件方法写法

源码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 挂载点 -->
  <div id="root">
    <button @click="onClick">点击切换隐藏与显示状态</button>
    <h1 v-if="isShow">Hello Vue</h1>
  </div>

  <!-- 导入vue的js代码 -->
  <script src="./lib/vue2.js"></script>

  <script>
    const app = new Vue({// Vue实例
      el: '#root',// 挂载点
      data: {// 数据
        isShow:true
      },
      methods: {// 方法
        onClick(){
          this.isShow = !this.isShow
        }
      }
    })
  </script>
</body>
</html>

效果演示

在这里插入图片描述

相关推荐

  1. vue--样式--样式切换方法

    2024-04-07 21:32:01       28 阅读
  2. vue数据

    2024-04-07 21:32:01       57 阅读
  3. vuekey

    2024-04-07 21:32:01       39 阅读
  4. vue

    2024-04-07 21:32:01       29 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-04-07 21:32:01       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-04-07 21:32:01       100 阅读
  3. 在Django里面运行非项目文件

    2024-04-07 21:32:01       82 阅读
  4. Python语言-面向对象

    2024-04-07 21:32:01       91 阅读

热门阅读

  1. 第一章:CSS基础入门

    2024-04-07 21:32:01       35 阅读
  2. LeetCode 416. 分割等和子集

    2024-04-07 21:32:01       38 阅读
  3. LeetCode-零钱兑换II

    2024-04-07 21:32:01       38 阅读
  4. spring-boot集成websocket

    2024-04-07 21:32:01       38 阅读
  5. MUX VLAN

    MUX VLAN

    2024-04-07 21:32:01      33 阅读
  6. Glide系列-自定义ModuleLoader

    2024-04-07 21:32:01       31 阅读
  7. Chrome 浏览器无法保存或自动填充密码

    2024-04-07 21:32:01       34 阅读
  8. 三道题搞懂子树问题

    2024-04-07 21:32:01       35 阅读
  9. 整个项目吧(尚医通)

    2024-04-07 21:32:01       39 阅读
  10. 使用iPhone/安卓手机代替门禁卡

    2024-04-07 21:32:01       130 阅读
  11. 干了三年外包。。。忘了什么是CICD。。。

    2024-04-07 21:32:01       34 阅读