如下所示：
demo.html
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Index Page</title></head> <body> <form action="" id="demo"> <input type="text" value="調(diào)試 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="調(diào)試 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中數(shù)據(jù)賦值時，會很自然而然的想到用“Mustache” 雙大括號插值法來賦值
在一個小案例中，比如給一個img標(biāo)簽附上鏈接 會很自然的想到
<img src={{img.path}} />運行時會很自然的發(fā)現(xiàn)文件資源請求失敗，究其因很簡單，因為src是屬性而不是值，故不可直接src={{ img.path }}
當(dāng)然，Vue的 v-bind 已經(jīng)為我們考慮完備了
官方文檔對于v-bind的說明：動態(tài)地綁定一個或多個特性，或一個組件 prop 到表達式。在綁定 class 或 style 特性時，支持其它類型的值，如數(shù)組或?qū)ο??？梢酝ㄟ^下面的教程鏈接查看詳情。
新聞熱點
疑難解答
圖片精選
