1. 程式人生 > >vue事件雙向綁定

vue事件雙向綁定

event eve bsp func char 入參 computed charset tex

事件

案例:

  vue的事件綁定原理:改變圖片的背景顏色問題來實現這個框架的使用方法,

  new Vue({

    el:"",

    data:{},

    methord:{},

    computed:{} 計算屬性的使用:用於大量基於數據模型的計算,但並不是每一次渲染都發生更改,計算屬性就會將數據直接返回,這樣提高計算效率。

    mounthd:{}

})

我們在事件綁定的時候傳入參數:比如點擊事件,@click=“funname($event,index)”

vue數據的雙向綁定

<!DOCTYPE html> <html> <head> <meta charset="
UTF-8"> <title></title> </head> <body> <input type="text" name="" id="input" value="" /> <h1></h1> <h3 id="username"></h3> <h4 id="age"></h4> <script type="text/javascript
"> var inputText = document.querySelector(#input) var h1 = document.querySelector(h1) var h3 = document.querySelector(#username) var age = document.querySelector(#age) inputText.oninput = function(){
var value = inputText.value h1.innerHTML = value; } var obj = { // name:‘張三‘, age:14, set name(value){ // console.log(value) this._name = value h3.innerHTML = this._name }, get name(){ return this._name }, } console.log(obj) //setter,getter//es6,es2015標準 //在給對象屬性賦值,或者是獲取對象屬性的時候,會調用setter、getter兩個方法 </script> </body> </html>

vue事件雙向綁定