详解VueJs中的V-bind指令


Posted in Javascript onMay 03, 2018

引子

v-bind  主要用于属性绑定,Vue官方提供了一个简写方式 :bind,例如:

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

  一、概述

      v-bind  主要用于属性绑定,比方你的class属性,style属性,value属性,href属性等等,只要是属性,就可以用v-bind指令进行绑定。

      示例:

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
<!-- 缩写 -->
<img :src="imageSrc">
<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName">
<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">
<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>
<!-- 绑定一个有属性的对象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
<!-- 通过 prop 修饰符绑定 DOM 属性 -->
<div v-bind:text-content.prop="text"></div>
<!-- prop 绑定。“prop”必须在 my-component 中声明。-->
<my-component :prop="someThing"></my-component>
<!-- 通过 $props 将父组件的 props 一起传给子组件 -->
<child-component v-bind="$props"></child-component>
<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

二、绑定 HTML Class

对象语法

       我们可以传给 v-bind:class 一个对象,以动态地切换 class

<div v-bind:class="{ active: isActive }"></div>

      上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive 的 truthiness

你可以在对象中传入更多属性来动态切换多个 class。此外,v-bind:class 指令也可以与普通的 class 属性共存。当有如下模板:

<div class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
  和如下 data

data: {
 isActive: true,
 hasError: false
}

       结果渲染为:

<div class="static active"></div>

    当 isActive 或者 hasError 变化时,class 列表将相应地更新。例如,如果 hasError 的值为 true,class 列表将变为 "static active text-danger"

      绑定的数据对象不必内联定义在模板里

<div v-bind:class="classObject"></div>
data: {
 classObject: {
 active: true,
 'text-danger': false
 }
}

       渲染的结果和上面一样。我们也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式:

<div v-bind:class="classObject"></div>

data: {
 isActive: true,
 error: null
},
computed: {
 classObject: function () {
 return {
  active: this.isActive && !this.error,
  'text-danger': this.error && this.error.type === 'fatal'
 }
 }
}

数组语法

    我们可以把一个数组传给 v-bind:class,以应用一个 class 列表

<div v-bind:class="[activeClass, errorClass]"></div>
data: {
 activeClass: 'active',
 errorClass: 'text-danger'
}

   渲染为:

<div class="active text-danger"></div>

     如果你也想根据条件切换列表中的 class,可以用三元表达式

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

    这样写将始终添加 errorClass,但是只有在 isActive 是 truthy 时才添加 activeClass。

     不过,当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

三、用在组件上

        当在一个自定义组件上使用 class 属性时,这些类将被添加到该组件的根元素上面。这个元素上已经存在的类不会被覆盖。

       例如,如果你声明了这个组件: 

Vue.component('my-component', {
 template: '<p class="foo bar">Hi</p>'
})

     然后在使用它的时候添加一些 class

<my-component class="baz boo"></my-component>

     HTML 将被渲染为:

<p class="foo bar baz boo">Hi</p>

     对于带数据绑定 class 也同样适用   

<my-component v-bind:class="{ active: isActive }"></my-component>

   当 isActive 为 truthy时,HTML 将被渲染成为

<p class="foo bar active">Hi</p>

 四、绑定内联样式

 对象语法

  v-bind:style 的对象语法十分直观——看着非常像 CSS,但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,记得用单引号括起来) 来命名: 

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
 activeColor: 'red',
 fontSize: 30
}

     直接绑定到一个样式对象通常更好,这会让模板更清晰

<div v-bind:style="styleObject"></div>

data: {
 styleObject: {
 color: 'red',
 fontSize: '13px'
 }
}

   同样的,对象语法常常结合返回对象的计算属性使用

    数组语法

   v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上

<div v-bind:style="[baseStyles, overridingStyles]"></div>

总结

以上所述是小编给大家介绍的VueJs中的V-bind指令,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
如果文字过长,则将过长的部分变成省略号显示
Jun 26 Javascript
如何快速的呈现我们的网页的技巧整理
Jul 01 Javascript
JavaScript 监听textarea中按键事件
Oct 08 Javascript
javascript 跨浏览器开发经验总结(五) js 事件
May 19 Javascript
DOM和XMLHttpRequest对象的属性和方法整理
Jan 04 Javascript
Js+Jq获取URL参数的集中方法示例代码
May 20 Javascript
JavaScript使用DeviceOne开发实战(一) 配置和起步
Dec 01 Javascript
JavaScript实现简单Tip提示框效果
Apr 20 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
May 05 Javascript
Javascript中将变量转换为字符串的三种方法
Sep 19 Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
Mar 02 Javascript
详解ES6 export default 和 import语句中的解构赋值
May 28 Javascript
基于vue,vue-router, vuex及addRoutes进行权限控制问题
May 02 #Javascript
用ES6写全屏滚动插件的示例代码
May 02 #Javascript
详解Vue中watch的高级用法
May 02 #Javascript
Vue.js中关于侦听器(watch)的高级用法示例
May 02 #Javascript
Vue SSR 组件加载问题
May 02 #Javascript
基于jquery实现左右上下移动效果
May 02 #jQuery
关于Vue在ie10下空白页的debug小结
May 02 #Javascript
You might like
详解ThinkPHP3.2.3验证码显示、刷新、校验
2016/12/29 PHP
使用WAMP搭建PHP本地开发环境
2017/05/10 PHP
php如何把表单内容提交到数据库
2019/07/08 PHP
js substr支持中文截取函数代码(中文是双字节)
2013/04/17 Javascript
浅谈jQuery事件绑定原理
2015/01/02 Javascript
jquery表单验证需要做些什么
2015/11/17 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
2016/05/19 Javascript
JavaScript数组的定义及数字操作技巧
2016/06/06 Javascript
Angular企业级开发——MVC之控制器详解
2017/02/20 Javascript
原生JS实现N级菜单的代码
2017/05/21 Javascript
vue-router路由懒加载和权限控制详解
2017/12/13 Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
2018/07/20 Javascript
详解写好JS条件语句的5条守则
2019/02/28 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
2019/03/08 Javascript
AngularJS动态生成select下拉框的方法实例
2019/11/17 Javascript
利用原生JS实现欢乐水果机小游戏
2020/04/23 Javascript
[00:23]魔方之谜解锁款式
2018/12/20 DOTA
python实现将html表格转换成CSV文件的方法
2015/06/28 Python
python中pika模块问题的深入探究
2018/10/13 Python
PyQt编程之如何在屏幕中央显示窗体的实例
2019/06/18 Python
python3实现二叉树的遍历与递归算法解析(小结)
2019/07/03 Python
python脚本执行CMD命令并返回结果的例子
2019/08/14 Python
python实现猜拳小游戏
2020/04/05 Python
详解Python 重学requests发起请求的基本方式
2020/02/07 Python
Python接口测试文件上传实例解析
2020/05/22 Python
利用PyTorch实现VGG16教程
2020/06/24 Python
Django websocket原理及功能实现代码
2020/11/14 Python
全球500多个机场的接送服务:Suntransfers
2019/06/03 全球购物
行政助理岗位职责范文
2013/12/03 职场文书
《三个小伙伴》教学反思
2014/04/11 职场文书
模具专业自荐信
2014/05/29 职场文书
运动会观后感
2015/06/09 职场文书
《山中访友》教学反思
2016/02/24 职场文书
JavaScript如何优化逻辑判断代码详解
2021/06/08 Javascript
用php如何解决大文件分片上传问题
2021/07/07 PHP
讲解Python实例练习逆序输出字符串
2022/05/06 Python