如下所示：
demo.html
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Index Page</title></head> <body> <form action="" id="demo"> <input type="text" value="調試 vuejs 2.0" ref="input1"> <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-on:click="test1">測試</a> <br> <span>{{ result1 }}</span> <br> <input type="text" v-model="input2"> <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-on:click="test2">測試</a> <br> <span>{{ result2 }}</span> </form> <script src="http://cdn.bootcss.com/vue/2.0.3/vue.min.js"></script> <script type="text/javascript" src="demo.js"></script></body> </html>demo.js
new Vue({ el: "#demo", data: { result1: null, result2: null, input2: "" }, methods: { test1: function () { this.result1 = this.$refs.input1.value + " 成功!"; }, test2: function () { this.result2 = this.input2 + " 成功!"; } }})demo.html
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Index Page</title></head> <body> <form action="" id="demo"> <input type="text" value="調試 vuejs 2.0" ref="input1"> <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-on:click="test1">測試</a> <br> <span>{{ result1 }}</span> <br> <input type="text" v-model="input2"> <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-on:click="test2">測試</a> <br> <span>{{ result2 }}</span> </form> <script src="http://cdn.bootcss.com/vue/2.0.3/vue.min.js"></script> <script type="text/javascript" src="demo.js"></script></body> </html>拓展知識：初試Vue之元素、屬性賦值方法
我們在vue中數據賦值時，會很自然而然的想到用“Mustache” 雙大括號插值法來賦值
在一個小案例中，比如給一個img標簽附上鏈接 會很自然的想到
<img src={{img.path}} />運行時會很自然的發(fā)現文件資源請求失敗，究其因很簡單，因為src是屬性而不是值，故不可直接src={{ img.path }}
當然，Vue的 v-bind 已經為我們考慮完備了
官方文檔對于v-bind的說明：動態(tài)地綁定一個或多個特性，或一個組件 prop 到表達式。在綁定 class 或 style 特性時，支持其它類型的值，如數組或對象。可以通過下面的教程鏈接查看詳情。
傳送門：v-bind官方說明
注意點：在普通文本可直接使用雙大括號法賦值，但對于標簽的屬性最好還是用v-bind來賦值，測了下，input 輸入框的 value 和 placeholder 是可以使用雙大括號法的。但是為了避免異議，還是遵循官方文檔給的要求，給屬性賦值時用v-bind吧。
以上這篇vue.js input框之間賦值方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
