目录
7.当 input 框失去焦点的时候,再去同步数据的变化--v-model.lazy:
9.去除输入内容前后的空格,然后再存入数据--v-model.trim:
0.公共部分:
<div id="root"></div>
<script src="https://unpkg.com/vue@next"></script>
语法: v-model="Vue数据变量"
双向数据绑定:
- 变量变化 -> 视图自动同步
- 视图变化 -> 变量自动同步
作用:将 vue 的数据变量和表单的 value 属性双向绑定到一起
1.input框的数据双向绑定--v-model:
<script>
const app = Vue.createApp({
data() {
return {
message: 'hi'
}
},
methods: {
},
template: `
<div>
<input v-model="message" />
</div>
`
});
//将组件挂到root节点里,即只作用在id等于root的div元素里
//vm 代表的就是 vue 应用的根组件
const vm = app.mount('#root');
//vm.$data 获得数据
// vm.$data.message = 'root';
</script>
2.textarea标签的数据双向绑定--v-model:
<script>
const app = Vue.createApp({
data() {
return {
message: 'hi'
}
},
methods: {
},
template: `
<div>
<textarea v-model="message" />
</div>
`
});
//将组件挂到root节点里,即只作用在id等于root的div元素里
//vm 代表的就是 vue 应用的根组件
const vm = app.mount('#root');
//vm.$data 获得数据
// vm.$data.message = 'root';
</script>
3.checkbox--属性值的双向数据绑定:
遇到复选框(checkbox),v-model的变量值:
- 非数组:关联的是复选框的 checked 属性
- 数组:关联的是复选框的 value 属性
单个,
<script>
const app = Vue.createApp({
data() {
return {
// message: []
message: false
}
},
methods: {
},
template: `
<div>
{{message}}
<p>
<input type="checkbox" v-model="message" value="vue" />vue
</p>
</div>
`
});
//将组件挂到root节点里,即只作用在id等于root的div元素里
//vm 代表的就是 vue 应用的根组件
const vm = app.mount('#root');
//vm.$data 获得数据
// vm.$data.message = 'root';
</script>
多个,
<script>
const app = Vue.createApp({
data() {
return {
message: []
}
},
methods: {
},
template: `
<div>
{{message}}
<p>
<input type="checkbox" v-model="message" value="vue" />vue
</p>
<p>
<input type="checkbox" v-model="message" value="js" />js
</p>
<p>
<input type="checkbox" v-model="message" value="es" />es
</p>
</div>
`
});
//将组件挂到root节点里,即只作用在id等于root的div元素里
//vm 代表的就是 vue 应用的根组件
const vm = app.mount('#root');
//vm.$data 获得数据
// vm.$data.message = 'root';
</script>
4.radio--属性值的双向绑定:
<script>
const app = Vue.createApp({
data() {
return {
message: ''
}
},
methods: {
},
template: `
<div>
{{message}}
<p>
<input type="radio" v-model="message" value="vue" name="" />vue
</p>
<p>
<input type="radio" v-model="message" value="js" name="" />js
</p>
<p>
<input type="radio" v-model="message" value="es" name="" />es
</p>
</div>
`
});
//将组件挂到root节点里,即只作用在id等于root的div元素里
//vm 代表的就是 vue 应用的根组件
const vm = app.mount('#root');
//vm.$data 获得数据
// vm.$data.message = 'root';
</script>
5.select标签的双向绑定:
下拉菜单 v-model 要绑定在 select 上
<script>
const app = Vue.createApp({
data() {
return {
message: ''
}
},
methods: {
},
template: `
<div>
{{message}}
<select v-model="message">
<option disabled value=''>请选择</option>
<option value='A'>A</option>
<option value='B'>B</option>
<option value='C'>C</option>
</select>
</div>
`
});
//将组件挂到root节点里,即只作用在id等于root的div元素里
//vm 代表的就是 vue 应用的根组件
const vm = app.mount('#root');
//vm.$data 获得数据
// vm.$data.message = 'root';
</script>
多选,
<script>
const app = Vue.createApp({
data() {
return {
message: [],
options: [{
text: 'A',
value: 'A',
}, {
text: 'B',
value: 'B',
}, {
text: 'C',
value: 'C'
}]
}
},
methods: {
},
template: `
<div>
{{message}}
<select v-model="message" multiple>
<option v-for="item in options" :value="item.value">{{item.text}}</option>
</select>
</div>
`
});
//将组件挂到root节点里,即只作用在id等于root的div元素里
//vm 代表的就是 vue 应用的根组件
const vm = app.mount('#root');
//vm.$data 获得数据
// vm.$data.message = 'root';
</script>
示例2,:
<script>
const app = Vue.createApp({
data() {
return {
message: [],
options: [{
text: 'A',
value: {
value: 'A'
}
}, {
text: 'B',
value: {
value: 'B'
}
}, {
text: 'C',
value: {
value: 'C'
}
}]
}
},
methods: {
},
template: `
<div>
{{message}}
<select v-model="message" multiple>
<option v-for="item in options" :value="item.value">{{item.text}}</option>
</select>
</div>
`
});
//将组件挂到root节点里,即只作用在id等于root的div元素里
//vm 代表的就是 vue 应用的根组件
const vm = app.mount('#root');
//vm.$data 获得数据
// vm.$data.message = 'root';
</script>
6.checkbox属性值特例:
<script>
const app = Vue.createApp({
data() {
return {
message: 'world'
}
},
methods: {
},
template: `
<div>
{{message}}
<input type="checkbox" v-model="message" true-value="hi" false-value='world' />vue
</div>
`
});
//将组件挂到root节点里,即只作用在id等于root的div元素里
//vm 代表的就是 vue 应用的根组件
const vm = app.mount('#root');
//vm.$data 获得数据
// vm.$data.message = 'root';
</script>
语法: v-model.修饰符="Vue数据变量":
- .number 以parseFloat转成数字类型
- .trim 去除首尾空白字符
- .lazy 在change时触发而非inupt时
7.当 input 框失去焦点的时候,再去同步数据的变化--v-model.lazy:
<script>
const app = Vue.createApp({
data() {
return {
message: 'world'
}
},
methods: {
},
template: `
<div>
{{message}}
<input v-model.lazy="message" />vue
</div>
`
});
//将组件挂到root节点里,即只作用在id等于root的div元素里
//vm 代表的就是 vue 应用的根组件
const vm = app.mount('#root');
//vm.$data 获得数据
// vm.$data.message = 'root';
</script>
8.v-model.number 的应用:
<script>
const app = Vue.createApp({
data() {
return {
message: '123'
}
},
methods: {
},
template: `
<div>
{{typeof message}}
<input v-model.number="message" />vue
</div>
`
});
//将组件挂到root节点里,即只作用在id等于root的div元素里
//vm 代表的就是 vue 应用的根组件
const vm = app.mount('#root');
//vm.$data 获得数据
// vm.$data.message = 'root';
</script>
9.去除输入内容前后的空格,然后再存入数据--v-model.trim:
<script>
const app = Vue.createApp({
data() {
return {
message: 'hello'
}
},
methods: {
},
template: `
<div>
{{message}}
<input v-model.trim="message" />vue
</div>
`
});
//将组件挂到root节点里,即只作用在id等于root的div元素里
//vm 代表的就是 vue 应用的根组件
const vm = app.mount('#root');
//vm.$data 获得数据
// vm.$data.message = 'root';
</script>