vue绑定事件、vue双向绑定 2022-3-14
生活随笔
收集整理的這篇文章主要介紹了
vue绑定事件、vue双向绑定 2022-3-14
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、Vue綁定事件
1.1Vue的7個常用屬性
以下一圖是網絡上的圖
1.2 methods屬性
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div id="app"><button v-on:click="sayHi">Click me</button> </div> <!--導入Vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <script>var vm = new Vue({el:"#app",//Model:數據data:{message:"hello,vue!"},methods:{sayHi:function (event){alert(this.message);}}})</script> </body> </html>二、vue雙向綁定
2.1什么是雙向綁定
vue是一個MVVM框架，即數據雙向綁定，即當數據發生變化是時候，視圖也就發生變化，視圖發生變化的時候，數據也會同步發生變化。
2.2在表單中使用雙向數據綁定（v-model）
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div id="app">輸入的文本：<input type="text" v-model="message">{{message}} </div> <!--導入Vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <script>var vm = new Vue({el:"#app",//Model:數據data:{message:"123"},})</script> </body> </html>結果：
默認是123
當輸入什么文本時，后面相對于就是什么文本
2.3 textarea演示, 使用v-model雙向綁定
<div id="app"><textarea name="" id="" cols="30" rows="10" v-model="message"></textarea>{{message}} </div>2.4單選框雙向綁定
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div id="app">性別：<input type="radio" name="sex" value="男" v-model="xb">男<input type="radio" name="sex" value="女" v-model="xb">女<p>你的性別是：{{xb}}</p></div> <!--導入Vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <script>var vm = new Vue({el:"#app",//Model:數據data:{xb:''},})</script> </body> </html>
結果：
2.5下拉框雙向綁定
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><div id="app">下拉框：<select v-model="selected"><option value="" disabled >--請選擇--</option><option>A</option><option>B</option><option>C</option></select><p>你選擇的選項是：{{selected}}</p></div> <!--導入Vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> <script>var vm = new Vue({el:"#app",//Model:數據data:{selected:''},})</script> </body> </html>總結
以上是生活随笔為你收集整理的vue绑定事件、vue双向绑定 2022-3-14的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 李开复给大学生的第3封信：成功、自信、快
- 下一篇： python---字符串详解