生活随笔
收集整理的這篇文章主要介紹了
vue表单所有实例
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
這里我將Vue官網的所有表單屬性進行了實現，包括各種表單的數據操作（比如設置默認值，選中值，等等~）。
下面代碼可以直接參考使用，希望使你工作效率飛一般的快！
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Vue中v-for的常見使用</title><script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
</head>
<script>
window.onload = function(){var app = new Vue({el: '#app',data: {message:"mayouchen is handsome!",checked: true,checkedNames: ['John'],picked: 'One',selected: 'A',selectedMulit:['B','C'],selectedAutoSign: 'A',options: [{ text: 'One', value: 'A' },{ text: 'Two', value: 'B' },{ text: 'Three', value: 'C' },{ text: 'four', value: 'D' }],selectedAutoMulit: ['C','D'],optionsMulit: [{ text: 'One', value: 'A' },{ text: 'Two', value: 'B' },{ text: 'Three', value: 'C' },{ text: 'four', value: 'D' }],msg:"馬優晨",msg2:123454}, mounted:function(){console.log(`${this.msg} 和 ${this.msg2}`);}})
}</script>
<body><div id="app"><template><div style="color:red;margin-top:20px">input框</div><input v-model="message" placeholder="請在此編輯~"><span>輸入的信息: {{ message }}</span><div style="color:red;margin-top:20px">textarea框</div><textarea v-model="message" placeholder="請在此編輯~"></textarea><span>輸入的信息:{{ message }}</span><div style="color:red;margin-top:20px">單選框</div><input type="checkbox" id="checkbox" v-model="checked"><span for="checkbox">{{ checked }}</span><div style="color:red;margin-top:20px">多選框(默認選中一個值)</div><div class="checkMuliply"><input type="checkbox" id="jack" value="Jack" v-model="checkedNames"><label for="jack">Jack</label><input type="checkbox" id="john" value="John" v-model="checkedNames"><label for="john">John</label><input type="checkbox" id="mike" value="Mike" v-model="checkedNames"><label for="mike">Mike</label><br><span>Checked names: {{ checkedNames }}</span></div><div style="color:red;margin-top:20px">單選按鈕</div><div><input type="radio" id="one" value="One" v-model="picked"><label for="one">One</label><br><input type="radio" id="two" value="Two" v-model="picked"><label for="two">Two</label><br><span>Picked: {{ picked }}</span></div><div style="color:red;margin-top:20px">選擇框（單選）</div><div><select v-model="selected"><option disabled value="">請選擇</option><option>A</option><option>B</option><option>C</option></select><span>Selected: {{ selected }}</span></div><div style="color:red;margin-top:20px">選擇框（多選）</div><div><select v-model="selectedMulit" multiple style="width: 50px;"><option value="A">A</option><option value="B">B</option><option value="C">C</option><option value="D">D</option></select><br><span>Selected: {{ selectedMulit }}</span></div><div style="color:red;margin-top:20px">動態遍歷-選擇框（單選）</div><select v-model="selectedAutoSign"><option v-for="option in options" v-bind:value="option.value" :key="option.value">{{ option.text }}</option></select><span>Selected: {{ selectedAutoSign }}</span><div style="color:red;margin-top:20px">動態遍歷-選擇框（多選）</div><select v-model="selectedAutoMulit" multiple style="width: 50px;"><option v-for="item in optionsMulit" v-bind:value="item.value" :key="item.value">{{ item.text }}</option></select><span>Selected: {{ selectedAutoMulit }}</span><div style="color:red;margin-top:20px">input框要求數據在“change”時而非“input”時更新，并去過濾用戶輸入的首尾空白字符</div><input v-model.laz.trim="msg" /><div style="color:red;margin-top:20px">input框要求數據在“change”時而非“input”時更新，并去過濾用戶輸入的首尾空白字符,并且輸入的是數字</div><input v-model.laz.trim.number="msg2" /></template></div>
</body>
</html>
效果圖如下：
總結
以上是生活随笔為你收集整理的vue表单所有实例的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
