v-model和input结合使用

v-model和radio（单选框结合）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>radio</title>
</head>
<body>
<div id="app"><!--原本取相同的name可以让单选框互斥，但是现在如果v-model绑定同一个变量，可以省略name，依然互斥--><label for="male"><input type="radio" id="male" value="男" v-model="sex">男</label><label for="female"><input type="radio" id="female"  value="女" v-model="sex">女</label><h2>您选择的性别是：{{sex}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好啊',/*此处变量值为男，那么双向绑定，这里反应到单选框中，就会默认选择value值为男的单选框*/sex: '男'}});
</script>
</body>
</html>

单选框的互斥通过name属性实现，如果name相同的单选框就是互斥的。

但是如果通过v-model双向绑定同一个变量，可以省略name,实现单选框的互斥。

v-model双向绑定，不仅将value值绑给了sex,如果初始值sex等于某个单选框的value也就默认选中。也就是页面操作可以改变model数据，model数据也可以影响页面显示。

注意和输入框的区别，必须在单选框属性里添加value属性，因为单选框的选项是固定的，他不是输入框，无法任意修改，我们通过value可以识别对应的选项。

v-model与checkbox结合使用

单选框的使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>checkbox类型</title>
</head>
<body>
<div id="app"><label for="agreement"><input type="checkbox" id="agreement" v-model="isAgree">同意协议</label><h2>您选择的是：{{isAgree}}</h2><button :disabled="!isAgree">下一步</button>
</div>
<script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好啊',isAgree: false}});
</script>
</body>
</html>

单选框通过true和false来控制是否被选中，通过v-model双向绑定，设置默认值可以修改默认是否选中，勾选复选框可以反过来修改默认值。

多选框

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>多选框</title>
</head>
<body>
<div id="app"><label for=""><input type="checkbox" value="篮球" v-model="hobbies">篮球<input type="checkbox" value="足球" v-model="hobbies">足球<input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球<input type="checkbox" value="排球" v-model="hobbies">排球<input type="checkbox" value="橄榄球" v-model="hobbies">橄榄球</label><h2>您的爱好是：{{hobbies}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好啊',hobbies: ['篮球']}});
</script>
</body>
</html>

注意多选框和单选框的区别，多选框有很多选择，value是为了让我们通过value值来识别对应的单选框，我们此时绑定的变量肯定不可能是单个布尔值，需要一个数组来存放选中的值，我们可以通过勾选来动态增加数组内的爱好，也可以取消勾选去掉到数组中的爱好，最重要的是我们可以通过在数组内添加默认值，来默认勾选多选框。

记住我们绑定的是一个数组，通过hobbies拿到的也是一个数组,绑定后得到的也是一个数组。

v-model和password结合

用法和text类型一摸一样。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app">
<!--<input type="text" :value="message" @input="message=$event.target.value">
--><input type="password" v-model="message"><h2>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '123456'}});
</script>
</body>
</html>

v-model与select(下拉框)结合

只能选择一个

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>select</title>
</head>
<body>
<div id="app"><select name="abc" id="" v-model="fruit"><option value="苹果">苹果</option><option value="香蕉">香蕉</option><option value="梨子">梨子</option><option value="橘子">橘子</option></select><h2>您最爱的水果是:{{fruit}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好啊',fruit:'香蕉'}});
</script>
</body>
</html>

注意下拉框的双向绑定是指向select的而不是某一个具体的option标签。

多个选择

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>select多个选中</title>
</head>
<body>
<div id="app"><select name="abc" id="" v-model="fruits" multiple><option value="苹果">苹果</option><option value="香蕉">香蕉</option><option value="梨子">梨子</option><option value="橘子">橘子</option></select><h2>您最爱的水果是:{{fruits}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好啊',fruits:['橘子']}});
</script>
</body>
</html>

多个选择还是需要绑定数组，并且在select里加上multiple，此时可以多选，按下ctrl然后点击多个，同时显示，也可以在数组中添加默认值。

v-model和input结合使用相关推荐

什么是V Model(V模型)
v-model是一种软件生存期模型,由Paul Rook在1980年率先提出的,在1990年出现在英国国家计算中心的出版物中,旨在提高软件开发的效率和有效性,是我们熟知的瀑布模型的一种改进,瀑布模型( ...
vue.js 表单 v-text
v-text可以替代{{}} <!DOCTYPE html> <html lang="en" xmlns:v‐on="http://www.w3.org ...
vue.js v-model
v-model可以实现view和model的双向绑定,所以名字v(view)-model(model) <!DOCTYPE html> <html lang="en&quo ...
前端面试准备：总结了一些面试很可能会问到的东西
JS面试题 !原型链: 原型:所有的函数都有一个特殊的属性prototype,prototype属性是一个指针,指向的是一个对象(原型对象), 原型中的属性和方法都可以被函数的实例共享, 原型链:原型 ...
vue 按钮删除input内容_Vue表单和v-model
一.基本用法 1.文本 <input v-model="message" placeholder="edit me"> <p>Messa ...
Input.GetAxis 获取轴
static function GetAxis (axisName : string) : float Description描述 Returns the value of the virtual a ...
Yii2.0 ActiveForm Input Fields
2019独角兽企业重金招聘Python工程师标准>>> 之前5月学习Yii2的时候发现的一个不错的博客内容,这里转载保存. Use the namespace For ActiveF ...
【李宏毅2020 ML/DL】P34 More about explainable AI | Attribution, Heatmap, explainable model
我已经有两年 ML 经历,这系列课主要用来查缺补漏,会记录一些细节的.自己不知道的东西. 已经有人记了笔记(很用心,强烈推荐):https://github.com/Sakura-gh/ML-note ...
keras系列︱Sequential与Model模型、keras基本结构功能（一）
不得不说,这深度学习框架更新太快了尤其到了Keras2.0版本,快到Keras中文版好多都是错的,快到官方文档也有旧的没更新,前路坑太多. 到发文为止,已经有theano/tensorflow/CNT ...
李宏毅机器学习 2016 秋：5、Classification：Probabilistic Generative Model
文章目录五.Classification:Probabilistic Generative Model 五.Classification:Probabilistic Generative Model ...

v-model和input结合使用

v-model和input结合使用

v-model和radio（单选框结合）

v-model与checkbox结合使用

单选框的使用

多选框

v-model和password结合

v-model与select(下拉框)结合

只能选择一个

多个选择

v-model和input结合使用相关推荐

最新文章

热门文章