脚本宝典收集整理的这篇文章主要介绍了vue-表单输入绑定,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
<div id="app">
{{msg}}
<input v-model="msg">
</div>
<script>
var app = new Vue({
el:"#app",
data:{
msg:"基本语法"
}
});
</script>
<div id="app">
{{msg}}
<textarea v-model="msg" ></textarea>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
msg:"基本语法"
}
});
</script>
<div id="app">
<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>
{{checkedNames}}
</div>
<script>
var app = new Vue({
el:"#app",
data:{
checkedNames: []
}
});
</script>
结果下图
<div id="app">
<input type="radio" id="one" value="1" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="2" v-model="picked">
<label for="two">Two</label><br/>
{{picked}}
</div>
<script>
var app = new Vue({
el:"#app",
data:{
picked: ''
}
});
</script>
结果为下
<div id="app">
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
{{selected}}
</div>
<script>
var app = new Vue({
el:"#app",
data:{
selected:""
}
});
</script>
结果为下
<div id="app">
<input type="checkbox" v-model="check" value = "学习"
v-bind:true-value="a" v-bind:false-value="b"/>学习
{{check}}
</div>
<script>
var app = new Vue({
el:"#app",
data:{
msg:"基本语法",
check:true,
a:"学习1",
b:"学习2"
}
});
</script>
<div id="app">
<input type="radio" v-model="pick" v-bind:value="c">
</div>
<script>
var app = new Vue({
el:"#app",
data:{
pick:"d",
c:"c",
d:"d"
}
});
</script>
结果根据pick的值来定,如果值是d就不选中,如果是c就选着,因为是根据value来决定pick的值
<div id="app">
{{msg}}
<input v-model.lazy="msg"/>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
msg:"修饰符",
}
});
</script>
<div id="app">
{{msg}}
<input v-model.number="num"/>
<input v-model.number="num1"/>
{{num+num1}}
</div>
<script>
var app = new Vue({
el:"#app",
data:{
num:1,
num1:1
}
});
</script>
<div id="app">
{{msg}}
<input v-model.lazy.trim="msg"/><br/>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
msg:"修饰符",
}
});
</script>
以上是脚本宝典为你收集整理的vue-表单输入绑定全部内容,希望文章能够帮你解决vue-表单输入绑定所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。