溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
如下所示：
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}} />
運行時會很自然的發現文件資源請求失敗，究其因很簡單，因為src是屬性而不是值，故不可直接src={{ img.path }}
當然，Vue的 v-bind 已經為我們考慮完備了
官方文檔對于v-bind的說明：動態地綁定一個或多個特性，或一個組件 prop 到表達式。在綁定 class 或 style 特性時，支持其它類型的值，如數組或對象。可以通過下面的教程鏈接查看詳情。
傳送門：v-bind官方說明
注意點：在普通文本可直接使用雙大括號法賦值，但對于標簽的屬性最好還是用v-bind來賦值，測了下，input 輸入框的 value 和 placeholder 是可以使用雙大括號法的。但是為了避免異議，還是遵循官方文檔給的要求，給屬性賦值時用v-bind吧。
以上這篇vue.js input框之間賦值方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
