Vue v-on v-model 组合使用
v-on
vue可以使用v-on指令来监听事件，方便与用户进行交互。我们不需要修改DOM中的数据，所有的操作都由Vue来实现，你编写的代码只需要关注底层逻辑。这也是Vue强大的地方之一
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="id">
{{message}}
<button v-on:click="reverseMessage">逆转信息</button>
</div>
</body>
<script>
var vm = new Vue({
el:"#id",
data:{
message:'Hello Vue.js!'
},
methods:{
reverseMessage:function(){
//把数据的顺序调换
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
</html>
v-model
在上面的例子中再添加 v-model指令双向绑定表单输入和应用状态，实现指令之间的组合使用
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="id">
{{message}}
<input v-model="message">
<button v-on:click="reverseMessage">逆转信息</button>
</div>
</body>
<script>
var vm = new Vue({
el:"#id",
data:{
message:'Hello Vue.js!'
},
methods:{
reverseMessage:function(){
//把数据的顺序调换
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
</html>
Vue v-on v-model 组合使用的更多相关文章
- 临时文件相关的v$tempfile v$sort_usage与V$tempseg_usage
SQL> select username,user,segtype,segfile#,segblk#,extents,segrfno# from v$sort_usage; SEGFILE#代表 ...
- 转：V$SQL,V$SQLAREA,V$SQLTEXT
V$SQL*表用于查看Shared SQL Area中SQL情况 V$SQLTEXT V$SQLTEXT用途很简单,就是用来查看完整的SQL语句,V$SQL和V$SQLAREA只能显示1000 byt ...
- v$session & v$session_wait
(1)v$session v$session视图记录了当前连接到数据库的session信息 Column Description SADDR session address SID Session i ...
- A discussion of Dead Connection Detection, Resource Limits, V$SESSION, V$PROCESS and OS processes
A discussion of Dead Connection Detection, Resource Limits, V$SESSION, V$PROCESS and OS processes (文 ...
- 错误提示：Dynamic Performance Tables not accessible, Automatic Statistics Disabled for this session You can disable statistics in the preference menu,or obtanin select priviliges on the v$session,v$sess
1.错误提示:Dynamic Performance Tables not accessible, Automatic Statistics Disabled for this session You ...
- 动态性能视图v$mystat,v$sesstat,v$statname
视图说明: v$mystat-------> 当前会话统计 v$sesstat------> 按会话进行分组统计 v$sysstat-------> 当系统的整体统计 v$statn ...
- Oracle v$session/v$sql 表
在本视图中,每一个连接到数据库实例中的 session都拥有一条记录.包括用户 session及后台进程如 DBWR, LGWR, arcchiver等等. V$SESSION中的常用列 V$SESS ...
- oracle常用视图v$mystat v$sesstat v$sysstat v$statname v$thread v$ parameter v$session v$process
这两天看了盖国强老师的<<深入浅出>>,很佩服盖老师钻研的精神.书中常用到一个查询语句,为了获取当前会话的跟踪文件路径,sql如下: SELECT d.VALUE || '/' ...
- 学习动态性能表(4)--v$sqltext&v$sqlarea
学习动态性能表 第四篇-(1)-V$SQLTEXT 2007.5.29 本视图包括Shared pool中SQL语句的完整文本,一条SQL语句可能分成多个块被保存于多个记录内. 注:V$SQLARE ...
- 转：Oracle里几组重要的视图--v$sysstat，v$system_event，v$parameter v$system_parameter
按组分的几组重要的性能视图 1.System 的 over view v$sysstat , v$system_event , v$parameter,V$instance得到oracle_sid ...
随机推荐
- hdu2587(递推)
目前做过的最纠结的一道递推题. 情况比较多,比较复杂... 这题最主要的还是要推出当m=2 时和m>2时,用什么方法最优. 给个数据 n=3,m=2 需要48 n=3,m=3 需要81 如果 ...
- 《从零开始学Swift》学习笔记（Day 11）——数据类型那些事儿？
原创文章,欢迎转载.转载请注明:关东升的博客 在我们学习语言时都会学到这种语言的数据类型,在Swift中数据类型有那些呢?整型.浮点型.布尔型.字符.字符串这些类型是一定有的,其中集合. ...
- 关于js的当前日期的格式化，和两个日期之间的相减的天数
function getFormatYMD(timesamp){ var date = new Date(timesamp); Y = date.getFullYear() + '-'; M = (d ...
- 关于Springboot中dubbo整合注意的误区（不对之处请指出）
这是我的客户端配置! 这是生产的配置, 首先注意一下 scan 我之前尝试这样的客户端配置 然后 果断客户端不能注册接口 @Reference(version="1.0") ...
- JavaScript数据结构与算法-字典练习
字典的实现 // 字典类 function Dictionary () { this.add = add; this.dataStore = new Array(); this.find = find ...
- AngularCli项目中添加字体图标（Font）详解
本文主要讲如何在AngularCli生成的项目中使用字体图标. 一 SVG图标准备 将需要转换为字体图标的图片转换为SVG格式. 这个让项目视觉设计师搞定即可. 二 SVG图标转Font 可以通过Ic ...
- golang 如何使用模版？
package main import ( "fmt" "net/http" "log" "html/template" ...
- 洛谷 P4768 [NOI2018]归程
洛谷 361行代码的由来 数据分治大发好啊- NOI的签到题,可怜我在家打了一下午才搞了80分. 正解应该是kruskal重构树或排序+可持久化并查集. 我就分点来讲暴力80分做法吧(毕竟正解我也没太 ...
- web测试策略
一.输入框 二.搜索功能 三.添加功能 四.修改功能 五.删除功能 六.注册.登陆模块 七.上传图片测试 八:文件导出 九.文件下载页面 十.查询结果列表 十一.cookie 一.输入框 1 字 ...
- nginx 与 lua 开发笔记
Nginx入门 本文目的是学习Nginx+Lua开发,对于Nginx基本知识可以参考如下文章: nginx启动.关闭.重启 http://www.cnblogs.com/derekchen/archi ...