vue快速入门(七)内联语句

注释很详细,直接上代码

上一篇

新增内容

  1. 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">
    <!-- 当为简单的事件内容并且操作内容为vue语句可以直接写成内联语句 -->
  <button @click="count--">-</button>
  <span>{{count}}</span>
  <button @click="count++">+</button>
  </div>

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

  <script>
    const app = new Vue({// Vue实例
      el: '#root',// 挂载点
      data: {// 数据
        count:100
      }
    })
  </script>
</body>
</html>

效果演示

在这里插入图片描述

下一篇

相关推荐

  1. v-on语句

    2024-04-07 22:16:02       45 阅读

最近更新

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

    2024-04-07 22:16:02       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-04-07 22:16:02       106 阅读
  3. 在Django里面运行非项目文件

    2024-04-07 22:16:02       87 阅读
  4. Python语言-面向对象

    2024-04-07 22:16:02       96 阅读

热门阅读

  1. 服务器出现404错误怎么处理

    2024-04-07 22:16:02       40 阅读
  2. springcloud整合consul遇到的问题

    2024-04-07 22:16:02       43 阅读
  3. Android OkHttp

    2024-04-07 22:16:02       34 阅读
  4. ThreadLocal介绍

    2024-04-07 22:16:02       41 阅读
  5. 蓝桥杯算法题:最大比例

    2024-04-07 22:16:02       43 阅读
  6. React事件和原生事件的执行顺序

    2024-04-07 22:16:02       38 阅读
  7. 三十六计与代码编写的奇妙结合

    2024-04-07 22:16:02       38 阅读