Vue - 指令 - (v-bind)

v-bind

两种方式绑定:

1.绑定属性

<div id="box">
  <input v-model="parentMsg">
  <child v-bind:my-message="parentMsg"></child>
</div>
Vue.component('child', {
  // 声明 props
  props: ['myMessage'],
  // 就像 data 一样,prop 也可以在模板中使用
  // 同样也可以在 vm 实例中通过 this.message 来使用
  template: '<span>{{ myMessage }}</span>'
})

var vm = new Vue({
  el: '#box',
  data: {
    parentMsg: ""
  }
})

可以绑定属性意味着也能绑定style属性:

<div v-bind:style="{width: helth + '%'}">

2.绑定一个对象的所有属性
注意:与v-model类似了,v-model="msg",直接就是等于。
而不是前面的v-bind: msg="variable"


v-bind绑定class可以绑定一个数组:

v-bind:class="['header', 'test']"    // 注意,这里是放在双引号下面的。

三元运算符:

v-bind:class="['header',  todo.completed ? 'complated' : ' ']"

如果完成了,那么就传入complated这个类,如果没有就不传递。注意,todo.completed是放在""(双引号)下面的。


经验:

<div v-bind:class="{ burst:bool }"></div>  // 如果bool为true,那么`class=burst`,否则是`class=''`
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 下载安装搭建环境 可以选npm安装,或者简单下载一个开发版的vue.js文件 浏览器打开加载有vue的文档时,控制...
    冥冥2017阅读 11,254评论 0 42
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 6,641评论 0 6
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 10,452评论 0 29
  • vue学习笔记 安装 Vue 提供一个官方命令行工具,可用于快速搭建大型单页应用。只需几分钟即可创建并启动一个带热...
    EL_PSY_CONGROO阅读 4,716评论 0 5
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,293评论 19 139