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 ...
随机推荐
- （六）通过solr7的API实现商品的列表查询
(六)通过solr7的API实现商品的列表查询 工具类: 获取 HttpSolrClient public class Constant { public static HttpSolrClient ...
- js，jquery和dojo操作dom
最近想学习arcgis javascript api,拦路虎就是dojo,为了便于理解dojo,在学习dojo的同时参考原生js和jquery,下午学习了下dom操作,mark下! 一.获取元素 js ...
- android 手机设置铃声
和应用程序相比,普通用户在初初接触智能手机时最先反而会对多媒体功能产生兴趣,尤其是铃声.壁纸设定之类个性化功能,更是让不少追求时尚的年轻人乐此不疲.对于Android手机来说,其铃声.图片的个性化空间 ...
- MySQL中事务的分类
从事务理论的角度来看,可以把事务分为以下几种类型 扁平事务(Flat Transactions) 带有保存点的扁平事务(Flat Transactions with Savepoints) 链事务(C ...
- 前端基础 & Bootstrap框架
Bootstrap介绍 Bootstrap是Twitter开源的基于HTML.CSS.JavaScript的前端框架. 它是为实现快速开发Web应用程序而设计的一套前端工具包. 它支持响应式布局,并且 ...
- 设计一个算法，採用BFS方式输出图G中从顶点u到v的最短路径（不带权的无向连通图G採用邻接表存储）
思想:图G是不带权的无向连通图.一条边的长度计为1,因此,求带顶点u和顶点v的最短的路径即求顶点u和顶点v的边数最少的顶点序列.利用广度优先遍历算法,从u出发进行广度遍历,类似于从顶点u出发一层一层地 ...
- 001-centos7安装 笔记本 联想G510
一.准备前提 1.联想G510AT 用winpe进入笔记本电脑,找到一个分区,删除即可 2.使用U盘安装 2.1.准备一个8G 的U盘,格式化ntfs. 2.2.在window下,下载UltraISO ...
- Nginx日志格式以及相关配置
一.Nginx日志格式以及参数说明log_format main '$remote_addr - $remote_user [$time_local] "$request" ' ...
- PyQt4 进度条和日历 代码
# -*- coding: utf-8 -*- """ ------------------------------------------------- File Na ...
- Network Basic Knowledge
@1: 应用层的常用协议以及对应的端口号: DNS 53/tcp/udp SMTP 25/tcp POP3 110/tcp HTTP 80/tcp HTTPS 443/udp TELNET 23/tc ...