深入解析Vue.js中v-bind v-model的使用和区别_Vue.js

上一篇: 关于vue、vuex的一些初步小结下一篇:使用Vue-Cli3+Webpack4搭建项目

深入解析Vue.js中v-bind v-model的使用和区别

发布时间：2019-05-14 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了深入解析Vue.js中v-bind v-model的使用和区别，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

v-model 指令在表单控件元素上创建双向数据绑定,所谓@L_512_0@，指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致，两者无论谁被改变，另一方也会相应的更新为相同的数据

**最基础的就是实现一个联动的效果**

<span>Multiline message is:</span>
<p>{{message}}</p>
<br>
<textarea name="" v-model="message" placeholder="please write..."></textarea>

</div>

</body>
<script>
new Vue({

 el:'.app'

})
</script>


**checkbox**

<input type="checkbox" id="jack" value="jack" v-model="checkedNames">
<label for="jack">jack</label>
<input type="checkbox" id="John" value="John" v-model="checkedNames">
<label for="jack">John</label>
<input type="checkbox" id="Mike" value="Mike" v-model="checkedNames">
<label for="jack">Mike</label>
<br>
<span>Checked names:{{checkedNames}}</span>

</div>

</body>
<script>
new Vue({

 el:'.app',
 data:{
   checkedNames:[]
 }

})
</script>

**v-bind**
有些指令可以在其名称后面带一个“参数” (argument)，中间放一个冒号隔开。例如，v-bind 指令用于响应地更新 HTML 特性

**结语**

感谢您的观看，如有不足之处，欢迎批评指正。

脚本宝典总结

以上是脚本宝典为你收集整理的深入解析Vue.js中v-bind v-model的使用和区别全部内容，希望文章能够帮你解决深入解析Vue.js中v-bind v-model的使用和区别所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：div HTML post-format-gallery Vue 双向绑定双向绑定

上一篇: 关于vue、vuex的一些初步小结下一篇:使用Vue-Cli3+Webpack4搭建项目

猜你在找的Vue.js相关文章

uni-app的优点有哪些 2022-05-23
Vue-SuperSlide(SuperSlide component for Vue) 2019-05-07
基于vue2.0的weex实践（前端视角） 2019-05-07
手把手教你写 Vue UI 组件库@vue2.0 2019-05-07
解决vue报错Failed to mount component 2019-05-07
Vue学习笔记之vue-cli项目搭建及解析 2019-05-07
Vue.js—单元测试 2019-05-07
vue2.0脚手架的安装和项目搭建 2019-05-07
Vue经典开源项目汇总demo实例github下载教程 2018-12-04
使用Vue.js构建Wordpress Gutenberg块 2018-11-17