Vue v-on v-model 組合使用

本文轉載自查看原文 2017-05-16 15:18 1407 Vue.js

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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue之v-model vue3中v-model的使用 vue v-model使用說明 vue3在組件上使用v-model 關於v-model、v-for、v-on的用法 vue使用填坑之:model和v-model的區別 vue v-model屬性 Vue--部分基本指令，v-bind,v-on,事件修飾符、v-model雙向綁定、綁定類與style、v-for、v-if和v-show的使用和特點 vue之 :model和v-model的區別 vue 自定義組件使用v-model