这篇文章主要介绍了vue2.0数据双向绑定与表单bootstrap+vue组件,非常不错，具有参考借鉴价值，需要的朋友可以参考下
最近一直在用vue，觉得确实是好用。
一，拿数据的双向绑定来说吧
<title>demo1</title> <div id="app"> {{ name }} </div>
vue中的所有数据都是在data中定义的，
el是指的挂载的元素，
watch 是我可以检测某个数据的变化。
v-model=“name” 就是与data中的name数据绑定，input框中的值变，那么data中的name也会变，我们可以通过差值操作，也就是{{name}}来看到变化，当然也可以像我一样打log。都是可以的。
当然这样也许还不是很实用，官网上也是这么介绍的，那么就说我在工作中是怎么用的吧
现在我的需求是要得到我表单里边的所有value ，我们也许可以
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
<div class="devDesc">
Device Description
<div class="form-group"> <label for="vendor" class="col-sm-2 control-label text-left">vendor:</label><div class="col-sm-2"> </div></div><div class="form-group"> <label for="dType" class="col-sm-2 control-label text-left">Type:</label><div class="col-sm-2"> </div></div><div class="form-group"> <label for="dDesc" class="col-sm-2 control-label text-left">description:</label><div class="col-sm-2"> </div></div><!----><!----><!--发现这个serList不用抽出来组件--><div class="serList serListPad"> <section class="serList-section"> <span class="span-serList">service List</span><button type="button" class="btn btn-default btn-sm"> <span class="glyphicon glyphicon-plus"></span></button></section><!----><div> </div></div><button class="btn btn-info">commit</button><button class="btn btn-success">save</button></div>
本文来源[email protected]搞@^&代*@码2网
以上所述是小编给大家介绍的vue2.0数据双向绑定与表单bootstrap+vue组件，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对gaodaima搞代码网网站的支持！
以上就是vue2.0数据双向绑定与表单bootstrap+vue组件的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue2.0数据双向绑定与表单bootstrap+vue组件
转载请注明原文链接：vue2.0数据双向绑定与表单bootstrap+vue组件
