vue 单相绑定_vue2 文本框的双向绑定和单项绑定

vue2 文本框的双向绑定和单项绑定

1,双向绑定

定义:组件中变量(data中或props中)的值改变时,文本框的值也跟着改变,

文本框的值改变(用户操作,比如输入,清空)时,组件中属性(data中或props中)的值 也同步变化

语法:

v-model

export default {

props: ['packageData'],

data: () => ({

originPrice: 300,

multiple: 1

})

}

以上是双向绑定,

一边是文本框的值,

一边是data属性multiple,

只要一边的值发生变化,另一边将同步改变

2,单项绑定

修改组件中变量(data中或props中)的值改变时,文本框的值也跟着改变

语法:

当修改data中orgFullName的值时,文本框的值也跟着改变

可以简写:

:value="orgFullName"

示例:

测试信息

验证

import testService from '@/services/testService'

export default {

data: () => ({

orgFullName: ''

}),

methods: {

queryAgent: function () {

// alert(111)

this.orgFullName = ''

testService.queryAgent($('#testId').val()).then(testValue => {

if (testValue && testValue.orgFullName) {

this.orgFullName = testValue.orgFullName

}

}

)

}

}

}

使用 v-model 来进行数据双向绑定。要牢记：

这不过是以下示例的语法糖：

v-bind:value="something"

v-on:input="something = $event.target.value">