vue2.0数据双向绑定与表单bootstrap+vue组件

网友投稿 251 2023-06-07


vue2.0数据双向绑定与表单bootstrap+vue组件

最近一直在用vue,觉得确实是好用。

一,拿数据的双向绑定来说吧

{{ name }}

vue中的所有数据都是在data中定义的,

el是指的挂载的元素,

watch 是我可以检测某个数据的变化。

v-model=“name” 就是与data中的name数据绑定,input框中的值变,那么data中的name也会变,我们可以通过差值操作,也就是{{name}}来看到变化,当然也可以像我一样打log。都是可以的。

当然这样也许还不是很实用,官网上也是这么介绍的,那么就说我在工作中是怎么用的吧

现在我的需求是要得到我表单里边的所有value ,我们也许可以

rIqaihQFA

let service = $('.vendor').val();

let vendor = document.getElementsByClassName('vendor')[0].value;

但是这样就完全没有get到vue双向绑定的好处了,那么我们该怎么做呢?

import service from './components/service.vue';

import $ from 'jquery';

export default {

data () {

return {

resultData: '',

vendor: '',

dType: '',

services: [service],

items: [service],

device: '',

dDesc: ''

}

},

watch: {

services () {

console.log(this.services);

},

items (val) {

this.items = val;

console.log(this.items);

}

},

components: {

service

},

methods: {

addService (component) {

this.items.push(component);

},

childServicesChange (val) {

this.services = val;

},

commit () {

console.log('commit');

let device = {

"type": 'urn:' + this.vendor + ':device:' + this.dType + ':0000',

"description": this.dDesc,

"services": this.items

};

看到没,我就是直接用的this.vendor, vendor是在data中定义好的,也进行了双向绑定v-model

Device Description

service List

以上所述是给大家介绍的vue2.0数据双向绑定与表单bootstrap+vue组件,希望对大家有所帮助,如果大家有任何疑问请给我留言,会及时回复大家的。在此也非常感谢大家对我们网站的支持!


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:Java使用组件编写窗口实现网络图片显示
下一篇:java 中JDBC连接数据库代码和步骤详解及实例代码
相关文章

 发表评论

暂时没有评论,来抢沙发吧~