vue.js 中 v-bind 是什么? 怎么用? 下面本篇文章给大家介绍一下 vue.JS 中的 v-bind 语法和使用方法. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
v-bind 是一个 vue 指令, 主要用于 html 属性绑定, 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
1, 对象语法
我们可以给 v-bind:class 一个对象, 以动态地切换 class. 注意: v-bind:class 指令可以与普通的 class 特性共存
HTML 代码:
- <ul class="box" v-bind:class="{'textColor':isColor,'textSize':isSize}">
- <li > 学习 Vue</li>
- <li > 学习 Node</li>
- <li > 学习 React</li>
- </ul>
CSS 代码:
- .box{
- border:1px dashed #f0f;
- }
- .textColor{
- color:#f00;
- background-color:#eef;
- }
- .textSize{
- font-size:30px;
- font-weight:bold;
- }
JS 代码:
- var vm= new Vue({
- el:'.box',
- data:{
- isColor:true,
- isSize:true
- }
- })
从图中可以看到, HTML 最终渲染为 <ul class="box textColor textSize"></ul>
当 isColor 和 isSize 变化时, class 列表将相应的更新, 例如, 将 isSize 改成 false,class 列表将变为 <ul class="box textColor"></ul>
也可以直接绑定数据里的一个对象:
HTML 代码:
<ul class="box" :class="classObject"> <li > 学习 Vue</li> <li > 学习 Node</li> <li > 学习 React</li> </ul>
JS 代码:
var vm= new Vue({ el:'.box', data:{ classObject:{ 'textColor':true, 'textSize':false // 不渲染, 注意看下面的截图 } } })
2, 数组语法
我们可以把一个数组传给 v-bind:class, 以应用一个 class 列表
HTML 代码:
<ul class="box" :class="[classA, classB]"> <li > 学习 Vue</li> <li > 学习 Node</li> <li > 学习 React</li> </ul>
JS 代码:
var vm= new Vue({ el:'.box', data:{ classA:'textColor', classB:'textSize' } })
如果想根据条件切换列表中的 class, 可以用三目运算
HTML 代码:
<ul class="box" :class="[isA?classA:'', classB]"> <li > 学习 Vue</li> <li > 学习 Node</li> <li > 学习 React</li> </ul>
JS 代码:
var vm= new Vue({ el:'.box', data:{ classA:'textColor', classB:'textSize', isA:false } })
在这个例子中, 首先判断 isA 的 boolean 值, 如果为 true, 则渲染 classA; 如果为 false, 则不渲染. classB 没有做三目运算, 所以是始终显示的, 看看页面截图
对于多个 class, 可以这么写:
<div v-bind:class="[classA, { classB: isB, classC: isC }]">
绑定内联样式
1, 对象语法
v-bind:style 的对象语法十分直观 -- 非常像 CSS, 其实它是一个 JavaScript 对象, CSS 属性名必须用驼峰命名法 (官方文档写的是既可以用驼峰也可以用 短横分隔命名法), 但是用短横分隔是会报错的
HTML 代码:(这里演示 CSS 属性名用短横分隔报错)
<div id="box" :style="{color:activeColor, font-size:size}"> 红嘴绿鹦哥 </div>
JS 代码:
var vm= new Vue({ el:'#box', data:{ activeColor:'#f00', size:'30px', shadow:'5px 2px 6px #000' } })
页面报错:
当我们按照驼峰命名法的规则去写的时候, 一切正常:
HTML 代码:
<div id="box" :style="{color:activeColor, fontSize:size, textShadow:shadow}"> 红嘴绿鹦哥 </div>
查看页面效果:
也可以直接绑定到一个样式对象, 这样更好, 让模板更清晰:
HTML 代码:
<div id="box" :style="styleObject"> 红嘴绿鹦哥 </div>
JS 代码:
var vm= new Vue({ el:'#box', data:{ styleObject:{ color:'red', fontSize:'30px' } } })
2, 数组语法
可将多个样式对象应用到一个元素上
HTML 代码:
<div class="box" :style="[styleObjectA, styleObjectB]"> 好好学习, 天天向上 </div>
JS 代码:
var vm2= new Vue({ el:'.box', data:{ styleObjectA:{ fontSize:'36px', color:'blue' }, styleObjectB:{ textDecoration:'underline' } } })
页面效果:
添加图片 SRC 地址
给 img 标签的 src 属性赋值时, 按照传统的方法 {{url}}:
HTML 代码:
<img class="box" src="{{url}}">
JS 代码:
var vm= new Vue({ el:'.box', data:{ url:'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png' } })
此时, 图片可以正常显示, 但是会报一个 404 错误, 查看控制台可以看到, Vue 更加推荐我们使用 v-bind:src
使用 v-bind:src 再来试试看
HTML 代码:
<img class="box" :src="url">
查看页面截图:
更多 web 开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/vue-js/17195.html