这一篇内容全部都用来讲关于v-model。后期进行对其部分进行更新。
v-model定义
· 作用:在表单元素上创建双向数据绑定
· 说明:监听用户的输入事件以更新数据
ps:这里需要注意的是,如果在data里面有声明值的话,那么会覆盖原本设置的初始值。比如:value、checked、selected等
· 案例:计算器
Html代码
<div id="app">
<input type="text" v-model="message" placeholder="input初始值">
<p>Message is: {{ message }}</p>
</div>
Javascript代码
<script>
var app = new Vue({
el: "#app",
data: {
message:""
}
})
</script>
这里我们没有在message里设置值。所以在html里面的input框中的placeholder默认值还是有效的。
但是我们如果把javascript值改成以下呢
<script>
var app = new Vue({
el: "#app",
data: {
message:"这是在data里所设置的值"
}
})
</script>
这时候我们运行后发现input框中的placeholder中的值为“这是在data里所设置的值”。这里需要注意的是,即使是空字符串,也会覆盖原来的值。比如message:” ”。目前我发现不能覆盖原来的值方法有message:“”和message:null这两种方法。
接下来有单选框,下拉选择等。用法都和这个一样,差不多。
表单修饰符
一、.lazy
定义:这个主要用来阻止input的输入框值与数据同步,是使用change事情同步。具体可以运行以下代码。
Html 代码
<div id="app">
<input type=”text” v-model.lazy="value">
<div>{{value}}</div>
</div>
Javascript 代码
<script>
var app = new Vue({
el: "#app",
data: {
value: '55'
}
})
</script>
上段代码可以把v-model.lazy的.lazy去掉,就可以看出来区别在哪里了。简单的形容一下,就是我们在改input里面的值时,下面的div中的值并不会实时更新,而是要离开input并点击一下,div中的值才会和input框中所输入的值一样。
二.number
定义:这个主要用来把input中所输入的值转换number
Html代码
<div id="app">
<input v-model.number="value" type="number">
<div>{{value}}</div>
</div>
Javascript 代码
<script>
var app = new Vue({
el: "#app",
data: {
value: ''
}
})
</script>
在html代码中,type="number"这个是什么意思呢?我们可以尝试把这段去掉,我们发现如果上面数字遇到特殊符号的时候,会停止更新,但是之前的值还依然存在。现在我们把type="number"这个加上。我们发现了只要input框中所输入的值含有特殊符号的时候,下面的div值会清空。
三 .trim
这个修饰符主要用来去除首尾空格符。(这是官方解释)在我理解看来,应该去除input框内任意位置空格符。毕竟在我理解看来,首尾,应该就是仅仅指开头和结尾。废话不多说,上代码。
Html代码
<div id="app">
<input v-model.trim="value" type="number">
<div>{{value}}</div>
</div>
Javascript 代码
<script>
var app = new Vue({
el: "#app",
data: {
value: ''
}
})
</script>
这个用法和.number和.lazy一样。现在我们再来想想这两个主要有什么作用呢?一个是只用来仅输入数字作用,另外一个来控制是否是实时更新。
当v-model修饰符为.trim的时候,我们发现在input框内任意位置输入空格时候,数据并不会显示出来。
以上就是简单的关于vue表单控件绑定使用方法介绍。
关于vue表单控件使用
一、Textarea
Html
<div id="app">
<textarea v-model="message" :placeholder="initial">
</textarea>
<div>textarea内容为{{message}}</div>
</div>
Javascript
<script>
var app = new Vue({
el: "#app",
data: {
initial:"请在textarea内输入内容",
message: ''
}
})
</script>
这里我们看到placeholder前面有个“:”的符号,我们来回顾一个这个是干嘛用的?为什么要用它?
具体参考往期文章:
soviya:VUE操作classstyle绑定属性绑定事件事件修饰符zhuanlan.zhihu.com如果不明白,或者有新的发现,可以私信我或者留言。
二、Checkbox
Html
<div id="app">
<input type="checkbox" id="checked" v-model="checked" />
<label for="checked">{{checked}}</label>
</div>
Javascript
<script>
var app = new Vue({
el: "#app",
data: {
checked:true
}
})
</script>
多个内容
Html
<div id="app">
<input type="checkbox" :value=grape id="grape" v-model="checkedes" />
<label for="grape">葡萄</label>
<input type="checkbox" :value=peach id="peach" v-model="checkedes" />
<label for="peach">桃子</label>
<input type="checkbox" :value=durian id="durian" v-model="checkedes" />
<label for="durian">榴莲</label>
<div>
您已所选的内容有{{ checkedes }}
</div>
</div>
javscript
<script>
var app = new Vue({
el: "#app",
data: {
grape:"葡萄",
peach:"桃子",
durian:"榴莲",
checkedes:[]
}
})
</script>
当input中的type类型为checkbox时。checkbox中的value值不会直接显示给用户,主要用于表单数据的提交和处理。radio也一样。
下列是radio 单项选择
Html
<div id="app">
<input type="radio" :value=grape id="grape" v-model="checkedes" />
<label for="grape">葡萄</label>
<input type="radio" :value=peach id="peach" v-model="checkedes" />
<label for="peach">桃子</label>
<input type="radio" :value=durian id="durian" v-model="checkedes" />
<label for="durian">榴莲</label>
<div>
您已所选的内容有{{ checkedes }}
</div>
</div>
Javascript
<script>
var app = new Vue({
el: "#app",
data: {
grape:"葡萄",
peach:"桃子",
durian:"榴莲",
checkedes:[]
}
})
</script>
Select 下拉选择框
<div id="app">
<select v-model="selected">
<option value="">请选择</option>
<option>葡萄</option>
<option>桃子</option>
<option>榴莲</option>
</select>
<div>
您已所选的内容有{{ selected }}
</div>
</div>
Javascript
<script>
var app = new Vue({
el: "#app",
data: {
selected:""
}
})
</script>
我们如何进行对其中某一数据初始化进行选定呢?这里先留个坑,等后面讲过生命周期和v-for等再来解决这个问题。