最近一直在用vue,觉得确实是好用。
成都创新互联是专业的聂拉木网站建设公司,聂拉木接单;提供网站建设、网站设计,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行聂拉木网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
一,拿数据的双向绑定来说吧
demo1 {{ name }}
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
Device Description
以上所述是小编给大家介绍的vue2.0数据双向绑定与表单bootstrap+vue组件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持!