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 组合使用的更多相关文章

  1. 临时文件相关的v$tempfile v$sort_usage与V$tempseg_usage

    SQL> select username,user,segtype,segfile#,segblk#,extents,segrfno# from v$sort_usage; SEGFILE#代表 ...

  2. 转：V$SQL,V$SQLAREA,V$SQLTEXT

    V$SQL*表用于查看Shared SQL Area中SQL情况 V$SQLTEXT V$SQLTEXT用途很简单,就是用来查看完整的SQL语句,V$SQL和V$SQLAREA只能显示1000 byt ...

  3. v$session & v$session_wait

    (1)v$session v$session视图记录了当前连接到数据库的session信息 Column Description SADDR session address SID Session i ...

  4. 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 (文 ...

  5. 错误提示：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 ...

  6. 动态性能视图v$mystat,v$sesstat,v$statname

    视图说明: v$mystat-------> 当前会话统计 v$sesstat------> 按会话进行分组统计 v$sysstat-------> 当系统的整体统计 v$statn ...

  7. Oracle v$session/v$sql 表

    在本视图中,每一个连接到数据库实例中的 session都拥有一条记录.包括用户 session及后台进程如 DBWR, LGWR, arcchiver等等. V$SESSION中的常用列 V$SESS ...

  8. oracle常用视图v$mystat v$sesstat v$sysstat v$statname v$thread v$ parameter v$session v$process

    这两天看了盖国强老师的<<深入浅出>>,很佩服盖老师钻研的精神.书中常用到一个查询语句,为了获取当前会话的跟踪文件路径,sql如下: SELECT d.VALUE || '/' ...

  9. 学习动态性能表(4)--v$sqltext&v$sqlarea

    学习动态性能表 第四篇-(1)-V$SQLTEXT  2007.5.29 本视图包括Shared pool中SQL语句的完整文本,一条SQL语句可能分成多个块被保存于多个记录内. 注:V$SQLARE ...

  10. 转：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 ...

随机推荐

  1. 巨蟒python全栈开发flask目录

    预习1: 1.FlaskWeb框架: https://www.cnblogs.com/DragonFire/category/1246076.html 人工智能技术应用: https://www.cn ...

  2. 移动端之touch事件--手指的滑动事件

    转自[B5教程网]:http://www.bcty365.com/content-142-5243-1.html 总结:touchmove的最后坐标减去touchstart的起始坐标.X的结果如果正数 ...

  3. SQLServer中行列转换Pivot UnPivot

    PIVOT用于将列值旋转为列名(即行转列),在SQL Server 2000可以用聚合函数配合CASE语句实现 PIVOT的一般语法是:PIVOT(聚合函数(列) FOR 列 in (…) )AS P ...

  4. PAT 1069. 微博转发抽奖(20)

    小明PAT考了满分,高兴之余决定发起微博转发抽奖活动,从转发的网友中按顺序每隔N个人就发出一个红包.请你编写程序帮助他确定中奖名单. 输入格式: 输入第一行给出三个正整数M(<= 1000).N ...

  5. http请求设置setConnectTimeout()方法超时无响应

    相信非常多小伙伴在写 HttpURLConnection中都设置了setConnectTimeout()方法.目的就是在网络不好的情况下超时返回 然而我们设置的setConnectTimeout()并 ...

  6. Could not create ServerSocket on address 0.0.0.0/0.0.0.0:9083

    遇到这种情况大家都找不到头绪,是因为你开始运行了hive的metastore,可以输入jps 然后出现如下: 红线所示就是hive metastore的进程 为了重新启动,需要把这个进杀掉: kill ...

  7. 021-Spring Boot 测试，Junit方式使用，mock方式，Controller测试

    一.概述 二.Junit方式使用 2.1.基本使用 eclipse在新建的类上,右键→new→Junit Test Case,修改一下Source folder,选择src/test/java,下一步 ...

  8. linux list.h 移植

    Linux内核中List链表的实现,对于想进阶的程序员来说,无疑是一个很好的学习机会.内核实现了一个功能十分强大的链表,而且是开源的,用在其他需要的地方岂不是很省事. 一.看List实现前,先补充ty ...

  9. 值得关注的10个Python语言学习博客

    大家好,还记得我当时学习python的时候,我一直努力地寻找关于python的博客,但我发现它们的数量很少.这也是我建立这个博客的原因,向大家分享我自己学到的新知识.今天我向大家推荐10个值得我们关注 ...

  10. win7 重启dns

    安装xshell.百度一搜就下载了. 修改hosts,hosts路径 C:\Windows\System32\drivers\etc\hosts 写法和linux一样. 重启dns命令 ipconfi ...