Vue v-on v-model 组合使用

v-on

vue可以使用v-on指令来监听事件，方便与用户进行交互。我们不需要修改DOM中的数据，所有的操作都由Vue来实现，你编写的代码只需要关注底层逻辑。这也是Vue强大的地方之一

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <script type="text/javascript"  src="vue.js"></script>
 7 </head>
 8 <body>
 9     <div id="id">
10         {{message}}
11         <button v-on:click="reverseMessage">逆转信息</button>
12     </div>
13 </body>
14 <script>
15     var vm = new Vue({
16         el:"#id",
17         data:{
18             message:'Hello Vue.js!'
19         },
20         methods:{
21             reverseMessage:function(){
22                 //把数据的顺序调换
23                 this.message = this.message.split('').reverse().join('')
24             }
25         }
26     })
27 </script>
28 </html>

v-model

在上面的例子中再添加 v-model指令双向绑定表单输入和应用状态，实现指令之间的组合使用

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <script type="text/javascript"  src="vue.js"></script>
 7 </head>
 8 <body>
 9     <div id="id">
10         {{message}}
11         <input v-model="message">
12         <button v-on:click="reverseMessage">逆转信息</button>
13     </div>
14 </body>
15 <script>
16     var vm = new Vue({
17         el:"#id",
18         data:{
19             message:'Hello Vue.js!'
20         },
21         methods:{
22             reverseMessage:function(){
23                 //把数据的顺序调换
24                 this.message = this.message.split('').reverse().join('')
25             }
26         }
27     })
28 </script>
29 </html>

转载于:https://www.cnblogs.com/dyfbk/p/6861539.html

Vue v-on v-model 组合使用相关推荐

V星入侵(V 2009)第一季全集下载
灰太狼的评论:科幻类型的美剧还真是不少啊,从迷失(Lost)到未来闪影(FlashForward),现在又一个V星入侵(V 2009),人都是充满好奇的动物.同时上映的V星入侵(V 2009)和未来闪 ...
$arr[]=$v 把 $v 这个东西放到 $arr[] 这个数组中
php里面的递归函数,$arr[]=$v;是什么意思 $arr[]=$v 把 $v 这个东西放到 $arr[] 这个数组中转载于:https://www.cnblogs.com/ ...
v$session v$session_wait
(1)v$session v$session视图记录了当前连接到数据库的session信息 Column Description SADDR session address SID Session i ...
Oracle v$session/v$sql 表
在本视图中,每一个连接到数据库实例中的 session都拥有一条记录.包括用户 session及后台进程如 DBWR, LGWR, arcchiver等等. V$SESSION中的常用列 V$SESS ...
通过v$sqlarea,v$sql查询最占用资源的查询
http://blog.sina.com.cn/s/blog_6ceed3280100x0q5.html 通过v$sqlarea,v$sql查询最占用资源的查询 (2011-09-01 22:22:0 ...
golang：%v，%+v，%#v区别
%v 按默认格式输出, %+v 在%v的基础上额外输出字段名, %#v 在%+v的基础上额外输出类型名. package mainimport "fmt"type T struct ...
golang：%v，%+v，%#v的区别
%v 按默认格式输出 %+v 在%v的基础上额外输出字段名 %#v 在%+v的基础上额外输出类型名示例代码: package mainimport "fmt"type T str ...
How to find block sql from dba_waiters v$session v$sql
查询被锁的会话通常我们会遇到有session被其他session block的状态,DBA需要找出这些block与被block的session及其sql,并删除导致blocking的session. ...
ie6、ie7、ie8下支持js 使用vml style.addRule('v\\:line,v\\:stroken',behavior:url(#default#VML);)
ie6.ie7.ie8下支持js 使用vml 2010-11-17 10:52:40| 分类: 计算机和编程 | 标签:ie6.ie7.ie8下支持js 使用vml |举报|字号订阅之前 ...
Oracle v$session v$active_session_history dba_hist_active_sess_history
v$session:实时 v$active_session_history : 每1秒将v$session中记录保存到 v$active_session_history 视图中,只会加载非idle会话 ...

Vue v-on v-model 组合使用

Vue v-on v-model 组合使用相关推荐

最新文章

热门文章