v-model可以实现view和model的双向绑定,所以名字v(view)-model(model)
<!DOCTYPE html>
<html lang="en" xmlns:v‐on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF‐8">
<title>vue.js v-model</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>
<body>
<div id="app">
<input type="text" v‐model="num1">+
<input type="text" v‐model="num2">=
{{Number.parseInt(num1)+Number.parseInt(num2)}}
</div>
</body>
<script>
var VM = new Vue({
el:"#app",
data:{
num1:0,
num2:0,
},
});
</script>
</html>
单行文本
<!-- 这里message是绑定的data里的数据,input输入框中的内容直接同步到message变量中 -->
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
多行文本
<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
复选框
new Vue({
el: '#example-3',
data: {
checkedNames: []
}
})
<div id='example-3'>
<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>
单选按钮
new Vue({
el: '#example-4',
data: {
picked: ''
}
})
<div id="example-4">
<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>
选择框
new Vue({
el: '...',
data: {
selected: ''
}
})
<div id="example-5">
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
修饰符
.lazy
.number
.trim
363
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
