vue form

NO IMAGE
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

表單的繫結


<div id="myDiv">
<p>{{message}}</p>
<input id="inTxt" v-model="message" placeholder="請輸入:">
<br>
<!-- 繫結的資料是checkbox中的value屬性值-->
<input type="checkbox" v-model="books" value="v-c  "> <label>c  </label>
<input type="checkbox" v-model="books" value="v-java"><label>java</label>
<input type="checkbox" v-model="books" value="v-php"><label>php</label>
<p>已選擇:{{books}}</p>
<br>
<input type="radio" v-model="gender" value="男"><label>小哥哥</label>
<input type="radio" v-model="gender" value="女"><label>小姐姐</label>
<p>性別:{{gender}}</p>
<br>
單選下拉框   <br>
<select v-model="num">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<p>選擇:{{num}}</p>
<br>
多選下拉框   <br>
<select v-model="nums" multiple>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<p>選擇:{{nums}}</p>
<br>
表單修飾符lazy,number,trim
對錶單資料進行修飾
lazy,在使用者輸入時不做繫結處理,在結束後再處理
<br>
<input type="text" v-model.lazy="txt">
<label>txt:{{txt}}</label>
將輸入內容轉化為數值型,如果非法,則返回NaN   <br>
<input type="number" v-model.number="age">
<label>age:{{age}}</label>
自動去掉兩端的空格<br>
<input type="text" v-model.trim="content">
<label>content:{{content}}</label>
</div>
<script>
// 繫結表單資料和vue變數
var myDiv = new Vue({
el: "#myDiv",
data: {
message: '請輸入',
books: [],
gender:"",
num:1,
nums:[],
txt:'',
age:1,
content:''
},
})
</script>

 

相關文章

程式語言 最新文章