vue双向绑定和单向绑定,vue.js 双向绑定

  vue双向绑定和单向绑定,vue.js 双向绑定

  本文主要介绍了用Vue实现双向绑定的四种方法,非常好,有参考价值。请有需要的朋友参考,希望能帮到你。

  :

目录

   1.双向绑定2。那么,其他标签选择会有同样的结果吗?当然,答案是肯定的:3。我们再来看另一个:4。注意总结。

  

1、双向绑定

  双向绑定意味着当你的前端数据发生变化时,你的数据中的数据也会发生变化。同样,当你的数据中的数据发生变化时,前端页面中的数据也会发生变化,这个过程不需要刷新。

  !声明文档类型

  html lang=en

  头

  meta charset=UTF-8

  标题标题/标题

  /头

  身体

  div id=应用程序

  !-将显示您输入的内容。事实上,当前端数据发生变化时,消息也会发生变化-

  text:input type= text v-model= message { message } }

  /div

  script src= https://cdn . jsdelivr . net/NPM/vue @ 2 . 5 . 21/dist/vue . min . js /script

  脚本

  var vm=new Vue({

  埃尔: #app ,

  数据:{

  消息:“”

  }

  });

  /脚本

  /body

  /html

  运行结果:

  如果数据中的数据发生变化,首页的数据也会发生变化,如下图:

  当前端数据发生变化时,你的数据中的数据也会发生变化。

  如下所示:

  

2、那么其它标签选中会不会也有这个结果,答案当然是有:

  !声明文档类型

  html lang=en

  头

  meta charset=UTF-8

  标题标题/标题

  /头

  身体

  div id=应用程序

  性别:

  type= radio name= sex value= male v-model= message 男性

  type= radio name= sex value= female v-model= message 雌性

  p您的性别是:{{message}}/p

  /div

  script src= https://cdn . jsdelivr . net/NPM/vue @ 2 . 5 . 21/dist/vue . min . js /script

  脚本

  var vm=new Vue({

  埃尔: #app ,

  数据:{

  消息:“”

  }

  });

  /脚本

  /body

  /html

  运行结果:

  

3、我们再来看一个:

  !声明文档类型

  html lang=en

  头

  meta charset=UTF-8

  标题标题/标题

  /头

  身体

  div id=应用程序

  select v-model=select

  选项= 已禁用-请选择-/选项

  男性/选项

  女人/选择

  /选择

  您的选择:{{select}}/span

  /div

  script src= https://cdn . jsdelivr . net/NPM/vue @ 2 . 5 . 21/dist/vue . min . js /script

  脚本

  var vm=new Vue({

  埃尔: #app ,

  数据:{

  选择:“”

  }

  });

  /脚本

  /body

  /html

  运行结果:

  

4、注意

  V-model将忽略所有表单元素的value、checked和selected属性的初始值,并始终使用Vue实例的数据作为数据源。你应该通过JavaScript在组件的数据选项中声明初始值!

  

总结

  本文到此为止。希望能帮到你,也希望你能多关注我们的更多内容!

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: