Vue之數據綁定

在我們Vue當中有兩種數據綁定的方法
1.單向綁定
2.雙向綁定

讓我為大家介紹一下吧！

1、單向綁定(v-bind)

數據只能從data流向頁面
舉個例子：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title>
</head>
<body><div id="root">單向綁定：<input type="text" v-bind:value="name"></div>
</body>
<script src="../JS/vue.js"></script>
<script>Vue.config.productionTip = false //阻止生產提示const vm = new Vue({el:"#root",data:{name:"張三"}})
</script>
</html>

在這里插入圖片描述

2.雙向綁定(v-model)

數據不僅能從data流向頁面，還可以從頁面流向data
注意：雙向綁定一般都應用在表單類元素上(如:input、select等)，.v-model:value 可以簡寫為 v-model，因為v-model默認收集的就是value值。

我們來用用雙向綁定

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title>
</head>
<body><div id="root">單向綁定：<input type="text" v-bind:value="name"><br><br>雙向綁定：<input type="text" v-model:value="name"></div>
</body>
<script src="../JS/vue.js"></script>
<script>Vue.config.productionTip = false //阻止生產提示const vm = new Vue({el:"#root",data:{name:"張三"}})
</script>
</html>

請添加圖片描述
感謝大家的閱讀，如有不對的地方，可以向我提出，感謝大家！

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/213182.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/213182.shtml
英文地址，請注明出處：http://en.pswp.cn/news/213182.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！