对Vue- 动态元素属性及v-bind和v-model的区别详解

 更新时间:2018年08月27日 10:55:03   作者:feicongcong   我要评论
今天小编就为大家分享一篇对Vue- 动态元素属性及v-bind和v-model的区别详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

Mustache (双大括号写法)不能在 HTML 属性中使用,应使用 v-bind 指令:

<div v-bind:id="dynamicId"></div>

这对布尔值的属性也有效 —— 如果条件被求值为 false 的话该属性会被移除:

<button v-bind:disabled="someDynamicCondition">Button</button>

从一开始学习的时候我们就知道v-bind是可以绑定属性和数据的,而v-model也一样可以绑定数据,那么v-bind和v-model的区别在哪里?

1:如果 id={{xxx}}这种写法,则HTML实际上是这样的:id="{{ xxx}}"

2:v-bind用于绑定属性和数据 ,其缩写为“ : ” 也就是v-bind:id === :id

3:v-model也可以绑定数据,但是他是用在表单控件上的,用于实现双向数据绑定,所以如果你用在除了表单控件以外的标签是没有任何效果的。

1:v-bind动态绑定指令,默认情况下标签自带属性的值是固定的,在为了能够动态的给这些属性添加值,可以使用v-bind:你要动态变化的值="表达式"

<input class="frmD" type="hidden" v-bind:lenderEnterprise.name="check4EP.name?lenderEnterprise.name:null"/>

2:v-bind用于绑定属性和数据 ,其缩写为“ : ” 也就是v-bind:id === :id

3:v-model用在表单控件上的,用于实现双向数据绑定,所以如果你用在除了表单控件以外的标签是没有任何效果的。

以上这篇对Vue- 动态元素属性及v-bind和v-model的区别详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • mpvue将vue项目转换为小程序

    mpvue将vue项目转换为小程序

    这篇文章主要介绍了mpvue将vue项目转换为小程序的相关资料及mpvue开发流程,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • 基于form-data请求格式详解

    基于form-data请求格式详解

    今天小编就为大家分享一篇基于form-data请求格式详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • vue v-model表单控件绑定详解

    vue v-model表单控件绑定详解

    这篇文章主要为大家详细介绍了vue v-model表单控件绑定的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • element-ui 关于获取select 的label值方法

    element-ui 关于获取select 的label值方法

    今天小编就为大家分享一篇element-ui 关于获取select 的label值方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • 在vue中根据光标的显示与消失实现下拉列表

    在vue中根据光标的显示与消失实现下拉列表

    这篇文章主要介绍了在vue中根据光标的显示与消失实现下拉列表,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • Vue.js常用指令汇总(v-if、v-for等)

    Vue.js常用指令汇总(v-if、v-for等)

    这篇文章主要为大家详细汇总了Vue.js常用指令及使用方法,包括v-if、v-for、v-show、v-bind、v-on等指令,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • 解决Vue 通过下表修改数组,页面不渲染的问题

    解决Vue 通过下表修改数组,页面不渲染的问题

    下面小编就为大家分享一篇解决Vue 通过下表修改数组,页面不渲染的问题。具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue ssr 指南详读

    vue ssr 指南详读

    这篇文章主要介绍了vue ssr 指南详读,详细的介绍了什么是SSR以及如何使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • vue 1.x 交互实现仿百度下拉列表示例

    vue 1.x 交互实现仿百度下拉列表示例

    本篇文章主要介绍了vue 1.x 交互实现仿百度下拉列表示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • 让Vue也可以使用Redux的方法

    让Vue也可以使用Redux的方法

    这篇文章主要介绍了让Vue也可以使用Redux的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05

最新评论