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. 《从零开始学Swift》学习笔记（Day 15）——请注意数字类型之间的转换

    原创文章,欢迎转载.转载请注明:关东升的博客 在C.Objective-C和Java等其他语言中,整型之间有两种转换方法: 从小范围数到大范围数转换是自动的: 从大范围数到小范围数需要强制类型转换,有 ...

  2. IIPP迷你项目（四）"Pong"

    1 小球在墙面的反弹 1-1 让小球在画布上匀速运动 在这一步中,首先应该明确小球是如何匀速运动的.它的方法是规定一个列表v,Scott老师说这代表着“速度(Velocity)”,但是我觉得也可以拿“ ...

  3. Building Shops

    Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others) Total Submissi ...

  4. The C Programming Language Second Edition

    %12d  at least #include <stdio.h> main() { ,sum=,w=; ; ; w<=end; w++ ) { sum+=w; // for(wb= ...

  5. JavaScript深入理解sort()方法

    一. 基本用法 let arr1 = [3, 5, 7, 1, 8, 7, 10, 20, 19] console.log(arr1.sort()) // [1, 10, 19, 20, 3, 5, ...

  6. MySQL中InnoDB脏页刷新机制Checkpoint

    我们知道InnoDB采用Write Ahead Log策略来防止宕机数据丢失,即事务提交时,先写重做日志,再修改内存数据页,这样就产生了脏页.既然有重做日志保证数据持久性,查询时也可以直接从缓冲池页中 ...

  7. 简述Python的深浅拷贝以及应用场景

    深浅拷贝的原理 深浅拷贝用法来自copy模块. 导入模块:import copy 浅拷贝:copy.copy 深拷贝:copy.deepcopy 字面理解:浅拷贝指仅仅拷贝数据集合的第一层数据,深拷贝 ...

  8. web.xml文件配置说明

    web.xml作用: web.xml主要用来配置Filter.Listener.Servlet等,当我们去启动一个WEB项目时,容器(jetty.tomcat等)首先会读取项目web.xml配置文件里 ...

  9. Percona备份mysql全库及指定数据库(完整备份与增量备份)

    Percona Xtrabackup备份mysql全库及指定数据库(完整备份与增量备份) Xtrabackup简介 Percona XtraBackup是开源免费的MySQL数据库热备份软件,它能对I ...

  10. F110使用的函数

    BAPI_ACC_DOCUMENT_POST BAPI_GL*POST 1.F-59 [没有找到函数]BAPI_ACC_DOCUMENT_POST 必须创建有借贷2 line 的凭证,需求要参考原始的 ...