vue 表单元素和组件中v-model应用、自定义v-model、watch监听
表单与侦听器1、v-model放在input等输入框标签内v-model='变量'(1)在表单元素,如input标签中设置v-model='变量'(2)在data中初始化变量,则input中的内容即是该内容(3)变量可提取出来,{{变量}},则会实时获取input中的内容(4)若要等到回车/焦点消失,变量中的内容才是输入框中的内容,改成v-mod...
·
(1)表单与侦听器
1、放在input、textarea等输入框标签内
<input v-model="message" placeholder="edit me">
<textarea v-model="message" placeholder="add multiple lines"></textarea>
(1)会忽略表单元素的value初始值,而是将data中初始化变量据作为数据来源的初始值
修饰符(可以链式调用):
v-model.lazy 等到回车/焦点消失,变量中的内容才是输入框中的内容
v-model.trim 去掉输入框前后内容的空格
v-model.number 将用户的输入值转为数值类型,单纯设置<input type='number'' />还是会被转换成字符串
扩展属性，仅会在 v-model 存在时工作
<input
type="checkbox"
v-model="toggle"
:true-value="dynamicTrueValue"
:false-value="dynamicFalseValue"
/>
v-model属性的值会在选中时被设为true-value的值，取消选择时设为false-value的值
2、放在单选框/复选框中
v-model='变量'
单选框:
v-model值为选中的value值
<input type="radio" id="one" value="One" v-model="picked">
<input type="radio" id="two" value="Two" v-model="picked">
多选框:
(1)当标签未设置value,v-model会绑定是否选中的布尔值
<input type="checkbox" id="checkbox" v-model="checked"> 未设置value初始值,则会绑定到选中状态的布尔值
(2)当标签设置value,且v-model绑定的值是数组,则会根据是否选中的value,往数组增/删元素
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<input type="checkbox" id="john" value="John" v-model="checkedNames">
checkedNames: []
3、下拉框
v-model的值为option标签中选中的值,若option标签设置了value,则为value值
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
4、多选下拉框(即在下拉框多加了multiple属性)
v-mdodel必须声明成数组[ ],数组内容为多选文本内容,若option标签设置了value,则为value值
<select v-model="selected" multiple style="width: 50px;">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
其中:
使用model选项来自定义各个表单的v-model
<template>
<input
type="checkbox"
:checked="v-model传递的变量名"
@change="$emit('改变时触发的事件名称', $event.target.checked)"
>
</template>
export default{
model:{
prop: 'v-model传递的变量名', v-model的值会传入该变量
event: '改变时触发的事件名称'
},
props:['v-model传递的变量名'] 在组件的props选项里声明这个prop。
}
<base-checkbox v-model="lovingVue"></base-checkbox>
这里的lovingVue的值将会传入这个prop,同时当<base-checkbox>触发一个change事件并附带一个新的值的时,这个lovingVue的property将会被更新。
(2)组件中使用v-model
1、在标签上使用v-model会等价于
<input v-model="searchText">
<input
v-bind:value="searchText"
@input="searchText = $event.target.value"
>
2、故在组件上使用,需要接收传递的value和$emit抛出input事件让父元素接收
<custom-input v-model="searchText"></custom-input>
旧版本:
<custom-input
v-bind:value="searchText"
@input="searchText = $event"
></custom-input>
组件中:
Vue.component('custom-input', {
props: ['value'],
template: `
<input
v-bind:value="value"
@input="$emit('input', $event.target.value)"
>
`
})
新版本:
<custom-input
:model-value="searchText"
@update:model-value="searchText = $event"
></custom-input>
组件中:
app.component('custom-input', {
props: ['modelValue'],
emits: ['update:modelValue'],
template: `
<input
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)"
>
`
})
(1)修改默认:modelValue 、update:modelValue默认名称
通过v-model:自定义名称,进行修改
<my-component v-model:title="bookTitle"></my-component>
app.component('my-component', {
props: {
title: String
},
emits: ['update:title'],
template: `
<input
type="text"
:value="title"
@input="$emit('update:title', $event.target.value)">
`
})
(2)传递并修改多个v-model名称同理:
<user-name
v-model:first-name="firstName"
v-model:last-name="lastName"
></user-name>
(3)自定义修饰符
<my-component v-model.capitalize="myText"></my-component>
1、添加到组件v-model的修饰符将通过modelModifiers这个prop提供给组件
app.component('my-component', {
props: {
modelValue: String,
modelModifiers: {
default: () => ({})
}
},
emits: ['update:modelValue'],
created() {
console.log(this.modelModifiers) =>{ capitalize: true }
},
methods: {
emitValue(e) {
let value = e.target.value
if (this.modelModifiers.capitalize) {
value = value.charAt(0).toUpperCase() + value.slice(1)
}
this.$emit('update:modelValue', value)
}
},
template: `<input
type="text"
:value="modelValue"
@input="emitValue">`
})
2、重命名的带修饰符的v-model
<my-component v-model:description.capitalize="myText"></my-component>
app.component('my-component', {
props: ['description', 'descriptionModifiers'],
emits: ['update:description'],
template: `
<input type="text"
:value="description"
@input="$emit('update:description', $event.target.value)">
`,
created() {
console.log(this.descriptionModifiers) =>{ capitalize: true }
}
})
(4)使用computed封装
app.component('custom-input', {
props: ['modelValue'],
emits: ['update:modelValue'],
template: `
<input v-model="value">
`,
computed: {
value: {
get() {
return this.modelValue
},
set(value) {
this.$emit('update:modelValue', value)
}
}
}
})
(3)监听函数
监听的就是引用地址
不能使用箭头函数:this将不会按照期望指向Vue实例，
watch:{
(1)普通监听
函数名(data)/变量名:function(newData,oldData)
{
xxx
},
变量名:'methods中声明的变量名'
"对象.属性":function (val, oldVal) {...} 监视嵌套属性,即对象下的某个属性
(2)监听对象/数组内部属性的变化,deep表示深层监听
名称:{
handler:方法,
deep:true
},
vm.$watch('someObject', callback, {
deep: true
})
(2.5)监听函数返回值
vm.$watch(
function () {
return this.a + this.b 每当返回不同结果都会触发监听回调,类似计算属性
return this.a.b 监视嵌套属性,通过函数的方式
},
function (newVal, oldVal) {
...
}
)
watch:{
"e.g":function (val, oldVal) {} 监视嵌套属性,即e下的g属性
}
(2.6)设置监听调用时机
vm.$watch('value',fn,{
flush:'pre'|'post'|'sync'
'pre': 默认值,指定的回调应该在渲染前被调用,它允许回调在模板运行前更新了其他值。
回调使用队列进行缓冲,回调只被添加到队列中一次,即使观察值变化了多次,值的中间变化将被跳过,不会传递给回调。
'post':指定回调推迟到渲染之后调用,如果回调需要通过$refs访问更新的DOM或子组件,那么则使用该值。
回调使用队列进行缓冲,回调只被添加到队列中一次,即使观察值变化了多次,值的中间变化将被跳过,不会传递给回调。
'sync': 一旦值发生了变化,回调将被同步调用,无pre和post的特性。
})
(3)侦听开始立即调用
名称:{
handler:方法,
immediate: true,
},
vm.$watch('a', callback, {
immediate: true
})
(4)可以传入回调数组，它们会被逐一调用
名称:[回调函数,回调函数,...]
f:[
方式一:
'handle1', 在methods中声明的函数名
方式二:
function handle2(val, oldVal) {
console.log('handle2 triggered')
},
方式三:
{
handler: function handle3(val, oldVal) {
console.log('handle3 triggered')
}，
deep: true
},
...
]
(5)返回取消监听函数
var unwatch = vm.$watch('a', cb);
unwatch(); 取消监听,当添加immediate参数时,不能在第一次回调函数中取消监听
兼容写法:
var unwatch = vm.$watch(
'value',
function () {
doSomething()
if (unwatch) {
unwatch()
}
},
{ immediate: true }
)
}
代码示例:
<template lang='html'>
<div >
<div>
//输入框
<input v-model.lazy.trim.number='inpt' type='text' name='' value='' id=''>
<p>{{inpt}}</p>
//单个多选按钮
<input type='checkbox' value='a' id='ipt' v-model='checked'>
<label for='ipt'>{{checked}}</label>
<span>{{checked}}</span>
//单选按钮
<input type="radio" id="one" v-model="picked">
<label for="one">One</label>
<span>{{picked}}</span>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
//多选下拉框
<select v-model="selected" multiple style="width: 50px;">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>
//单选下拉框
<select v-model="selected2">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected2 }}</span>
//多选按钮
<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>
</div>
</template>
<script>
export default{
name:'vuedemo',
data()
{
return{
inpt:'',
checked:[],
picked:'',
selected:[],
selected2:[],
checkedNames:[]
}
},
//wacth
watch:{
inpt(data)
{
if(data==100)
{
this.inpt='符合条件'
}
}
}
}
</script>
<style lang='css'>
</style>
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献20条内容
所有评论(0)