当前位置: 首页 > news >正文

vue 简单实验 v-on html事件绑定

1.代码

<script src="https://unpkg.com/vue@next" rel="external nofollow" ></script>
<div id="event-handling"><p>{{ message }}</p><button v-on:click="reverseMessage">反转 Message</button>
</div>
<script>
const EventHandling = {data() {return {message: 'Hello Vue.js!'}},methods: {reverseMessage() {this.message = this.message.split('').reverse().join('')}}
}
Vue.createApp(EventHandling).mount('#event-handling')
</script>

2.运行结果

http://www.lryc.cn/news/142750.html

相关文章:

  • c#设计模式-创建型模式 之 原型模式
  • 运放的分类、运放的参数
  • 手写数字识别之优化算法:观察Loss下降的情况判断合理的学习率
  • 软件工程(二十) 系统运行与软件维护
  • 蓝蓝设计ui设计公司作品--泛亚高科-光伏电站控制系统界面设计
  • 软考高级系统架构设计师系列论文七十:论信息系统的安全体系
  • ​Softing dataFEED OPC Suite——助力数字孪生技术发展
  • LLaMA中ROPE位置编码实现源码解析
  • 在c++ 20下使用微软的proxy库替代传统的virtual动态多态
  • Spring MVC:@RequestMapping
  • 【vue3+ts项目】配置eslint校验代码工具,eslint+prettier+stylelint
  • PHP之ZipArchive打包压缩文件
  • 面试之快速学习C++14
  • 【算法专题突破】双指针 - 快乐数(3)
  • 【javaweb】学习日记Day4 - Maven 依赖管理 Web入门
  • C++信息学奥赛1144:单词翻转
  • qt检查文件夹是否有写权限
  • LSF 安装目录,快速参考 LSF 命令、守护程序、配置文件、日志文件和重要集群配置参数
  • 在Mybatis中写动态sql这些标签:if、where、set、trim、foreach、choose的作用是什么,怎么用?
  • 7 Python的模块和包
  • 【JavaWeb 篇】使用Servlet、JdbcTemplate和Durid连接池实现用户登录功能与测试
  • 【Unity3D赛车游戏】【六】如何在Unity中为汽车添加发动机和手动挡变速?
  • 【Go 基础篇】切片:Go语言中的灵活数据结构
  • 龙芯2K1000LA移植交叉编译环境以及QT
  • javaee spring依赖注入之spel方式
  • 【Java集合学习1】ArrayList集合学习及集合概述分析
  • TouchGFX之调试
  • C# winform加载yolov8模型测试(附例程)
  • 浙大陈越何钦铭数据结构07-图6 旅游规划
  • VUE笔记(七)项目登录