v-model

主要是用在表单元素中，它实现了双向绑定。在同时使用v-bind和v-model中，v-model建立的双向绑定对输入型元素input, textarea, select等具有优先权，会强制实行双向绑定。很多时候v-model使用在表单的<input>中实现双向绑定。

<input v-model="name">

v-bind

v-bind:class 可简写为 :class
支持的类型：html中的属性、css的样式、对象、数组、number 类型、bool类型

当加上v-bind:之后，它的值classe不是字符串，而是vue实例对应的data.classed的这个变量。也就是说data.classed是什么值，它就会给class属性传递什么值，当data.classed发生变化的时候，class属性也发生变化，这非常适合用在通过css来实现动画效果的场合。它只是单向变动

<!--绑定文本-->
<p v-bind="message"></p><!--绑定属性-->
<p v-bind:src="http://...."></p>
<p v-bind:class="http://...."></p>
<p v-bind:style="http://...."></p>

<!--绑定表达式-->
:class{className:true}

点击

<input v-model="something">

只是语法糖:

<inputv-bind:value="something"v-on:input="something = $event.target.value"
><!--或(简写语法)--><input:value="something"@input="something = $event.target.value"
>

v-model就是 双向绑定 意味着:如果改变输入值,有界数据将被改变,反之亦然.
v-bind:value被称为 单向绑定 意味着:您可以通过更改有界数据来更改输入值,但不能通过更改元素的输入值来更改有界数据.

vue中v-model和v-bind区别相关推荐

Vue中export和export default的区别和用法
Vue是通过webpack实现的模块化,因此可以使用import来引入模块,例如: import Vue from 'vue' import Router from 'vue-router' ...
面试官：Vue中组件和插件有什么区别？
一.组件是什么回顾一下对组件的定义: 组件就是把图形.非图形的各种逻辑均抽象为一个统一的概念(组件)来实现开发的模式,在Vue中每一个.vue文件都可以视为一个组件组件的优势降低整个系统的耦合度 ...
Vue 中 export及export default的区别
相信很多人都在vue使用过export.export default.import,然而它们到底有什么区别呢? 在ES6中,export与export default均可用于导出常量.函数.文件.模块 ...
vue中Computed、Methods、Watch区别
一.methods.watch.computed的区别 computed 属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算,主要当作属性来使用: methods 方法表示一个具体的操作,主要书 ...
Vue中，views和components的区别
在Vue.js中,views和components都是Vue文件,但是它们有不同的作用和使用方式. Views Views是指应用程序中的页面,在Vue.js中通常使用Vue Router实现路由功能 ...
面试题： Vue中的 computed 和 watch的区别
computed computed看上去是方法,但是实际上是计算属性,它会根据你所依赖的数据动态显示新的计算结果.计算结果会被缓存,computed的值在getter执行后是会缓存的,只有在它依赖的属 ...
vue学习：vue中data和return data的区别
在简单的vue实例中看到的Vue实例中data属性是如下方式展示的: let app= newVue({ el:"#app", data:{ msg:'' }, methods:{ ...
Vue中的 computed 和 watch的区别
computed computed看上去是方法,但是实际上是计算属性,它会根据你所依赖的数据动态显示新的计算结果.计算结果会被缓存,computed的值在getter执行后是会缓存的,只有在它依赖的属 ...
VUE中数组赋值push与=的区别
最近做项目时(vue2.0)遇到此坑耗费不少时间,分享如下: data中定义初始结构: data:function(){ return { optionsArr: [{name ...
vue 中v-model和v-decorator的用法区别
v-model:是双向数据绑定,啥为双向绑定,即为绑定的是个变量,当变量的值改变,双方都会跟着改变.也可用于form表单. v-decorator:一般用于form表单下的a-form-item 下的 ...

vue中v-model和v-bind区别

v-model

v-bind

vue中v-model和v-bind区别相关推荐

最新文章

热门文章