v-model双向绑定
生活随笔
收集整理的這篇文章主要介紹了
v-model双向绑定
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>VUE綁定模式</title><script src="js/vue.js"></script></head><body><div id="app"><p>input標(biāo)簽元素</p><input v-model="message" placeholder="編輯我" /><p>消息是：{{message}}</p><hr /><p>textarea元素的案例</p><p style="background: #444444;">{{message2}}</p><textarea v-model="message2" placeholder="多行文本框輸入..."></textarea></div><!--js代碼--><script>new Vue({el:'#app',data:{message:'VUE案例模式',message2:'前端視頻,www.csdn.net'}})</script></body>
</html>
?
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>v-model案例2</title><script src="js/vue.js"></script></head><body><!--布局設(shè)計(jì)--><div id="app"><p>復(fù)選框:</p><input type="checkbox" id="checkbox" v-model="checked"><label for="checkbox">{{ checked }}</label><p>多個(gè)復(fù)選框</p><input type="checkbox" id="rubbo" value="rubbo" v-model="checkedNames" /><label for="rubbo">rubbo</label><input type="checkbox" id="java" value="java" v-model="checkedNames" /><label for="java">java</label><input type="checkbox" id="python" value="python" v-model="checkedNames" /><label for="python">python</label><br /><span>選擇值為:{{checkedNames}}</span></div><script>new Vue({el:'#app',data:{checked:false,checkedNames:[]}})</script></body> </html>?
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>VUE單選按鈕案例3</title><script src="js/vue.min.js"></script></head><body><!--布局--><div id="app"><input type="radio" id="agree" value="agree" v-model="picked" /><label for="agree">agree</label><input type="radio" id="disagree" value="disagree" v-model="picked" /><label for="disagree">disagree</label><hr style="width: 400px;margin-left: 0px;"/><span>{{picked}}</span></div><!--js代碼--><script>new Vue({el:'#app',data:{picked:'agree'}})</script></body> </html>總結(jié)
以上是生活随笔為你收集整理的v-model双向绑定的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Java NIO：浅析I/O模型
- 下一篇： props属性