Vue表单
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>表單</title><script src="js/vue.js"></script></head><body><div id="app"><p>input 元素：</p><input v-model="message" placeholder="編輯我……"><p>消息是: {{ message }}</p><p>textarea 元素：</p><p style="white-space: pre">{{ message2 }}</p><textarea v-model="message2" placeholder="多行文本輸入……"></textarea><p>單個復選框：</p><input type="checkbox" id="checkbox" v-model="checked" /><label for="checkbox">{{checked}}</label><p>多個復選框</p><input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames" /><label for="runoob">Runoob</label><input type="checkbox" id="google" value="Google" v-model="checkedNames"><label for="google">Google</label><input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames"><label for="taobao">taobao</label><br /><span>選擇的值為{{checkedNames}}</span><br /><input type="radio" value="Runoob" v-model="picked" /><label for="runoob">Runoob</label><br><input type="radio" value="Google" v-model="picked"><label for="google">Google</label><br><span>選中值為: {{ picked }}</span><select v-model="selected" name="fruit"><option value="">選擇一個網站</option><option value="www.runoob.com">Runoob</option><option value="www.google.com">Google</option></select><div id="output">選擇的網站是: {{selected}}</div></div><script>new Vue({el: '#app',data: {message: 'Runoob',message2: '菜鳥教程\r\nhttp://www.runoob.com',checkedNames: false,checkedNames: [],picked: 'Runoob',selected: ''}})</script></body>
</html>
**在這里插入代碼片**
總結
- 上一篇： 事件处理器
- 下一篇： html5倒计时秒杀怎么做,vue 设