Vue.js 属性绑定 v-bind

简介:

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

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


绑定HTML Class

一、对象语法:

我们可以给v-bind:class 一个对象,以动态地切换class。注意:v-bind:class指令可以与普通的class特性共存

HTML代码:

1
2
3
4
5
< ul  class = "box"  v-bind:class = "{'textColor':isColor, 'textSize':isSize}" >
     < li >学习Vue</ li >
     < li >学习Node</ li >
     < li >学习React</ li >
</ ul >


CSS代码:

1
2
3
4
5
6
7
8
9
10
11
.box{
     border : 1px  dashed  #f0f ;
}
.textColor{
     color : #f00 ;
     background-color : #eef ;
}
.textSize{
     font-size : 30px ;
     font-weight : bold ;
}


JS代码:

1
2
3
4
5
6
7
var  vm=  new  Vue({
     el: '.box' ,
     data:{
         isColor: true ,
         isSize: true
     }
})


wKiom1gLEX3ygKjKAADBZbnUz8Y282.png

从图中可以看到,HTML最终渲染为 <ul class="box textColor textSize"></ul>

当 isColor 和 isSize 变化时,class列表将相应的更新,例如,将isSize改成false,class列表将变为 <ul class="box textColor"></ul>


也可以直接绑定数据里的一个对象:

HTML代码:

1
2
3
4
5
< ul  class = "box"  :class = "classObject" >
     < li >学习Vue</ li >
     < li >学习Node</ li >
     < li >学习React</ li >
</ ul >


JS代码:

1
2
3
4
5
6
7
8
9
var  vm=  new  Vue({
     el: '.box' ,
     data:{
         classObject:{
             'textColor' : true ,
             'textSize' : false  //不渲染,注意看下面的截图
         }
     }
})

wKioL1gLE7jBVrvSAACSP3ftTFM106.png

二、数组语法

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

HTML代码:

1
2
3
4
5
< ul  class = "box"  :class = "[classA, classB]" >
     < li >学习Vue</ li >
     < li >学习Node</ li >
     < li >学习React</ li >
</ ul >


JS代码:

1
2
3
4
5
6
7
var  vm=  new  Vue({
     el: '.box' ,
     data:{
         classA: 'textColor' ,
         classB: 'textSize'
     }
})


如果想根据条件切换列表中的class,可以用三目运算

HTML代码:

1
2
3
4
5
< ul  class = "box"  :class = "[isA?classA:'', classB]" >
     < li >学习Vue</ li >
     < li >学习Node</ li >
     < li >学习React</ li >
</ ul >

JS代码:

1
2
3
4
5
6
7
8
var  vm=  new  Vue({
     el: '.box' ,
     data:{
         classA: 'textColor' ,
         classB: 'textSize' ,
         isA: false 
     }
})

在这个例子中,首先判断isA的boolean值,如果为true,则渲染classA;如果为false,则不渲染。classB没有做三目运算,所以是始终显示的,看看页面截图

wKioL1gLFw7zSxVrAACvZz_XHmk974.png

对于多个class,可以这么写:

1
< div  v-bind:class = "[classA, { classB: isB, classC: isC }]" >


绑定内联样式

一、对象语法

v-bind:style 的对象语法十分直观--非常像CSS,其实它是一个Javascript对象,CSS属性名必须用驼峰命名法 (官方文档写的是既可以用驼峰也可以用 短横分隔命名法),但是用短横分隔是会报错的


HTML代码:(这里演示CSS属性名用短横分隔报错)

1
< div  id = "box"  :style = "{color:activeColor, font-size:size}" >红嘴绿鹦哥</ div >


JS代码:

1
2
3
4
5
6
7
8
var  vm=  new  Vue({
     el: '#box' ,
     data:{
         activeColor: '#f00' ,
         size: '30px' ,
         shadow: '5px 2px 6px #000'
     }
})

页面报错:

wKiom1gLIfCj-mf7AABB3Aq2nvA671.png

当我们按照驼峰命名法的规则去写的时候,一切正常:

HTML代码:

1
< div  id = "box"  :style = "{color:activeColor, fontSize:size, textShadow:shadow}" >红嘴绿鹦哥</ div >


查看页面效果:

wKioL1gLIyqzc363AADADIC58MM045.png


也可以直接绑定到一个样式对象,这样更好,让模板更清晰:

HTML代码:

1
< div  id = "box"  :style = "styleObject" >红嘴绿鹦哥</ div >


JS代码:

1
2
3
4
5
6
7
8
9
var  vm=  new  Vue({
     el: '#box' ,
     data:{
         styleObject:{
             color: 'red' ,
             fontSize: '30px'
         }
     }
})


二、数组语法

可将多个样式对象应用到一个元素上

HTML代码:

1
< div  class = "box"  :style = "[styleObjectA, styleObjectB]" >好好学习,天天向上</ div >


JS代码:

1
2
3
4
5
6
7
8
9
10
11
12
var  vm2=  new  Vue({
     el: '.box' ,
     data:{
         styleObjectA:{
             fontSize: '36px' ,
             color: 'blue'
         },
         styleObjectB:{
             textDecoration: 'underline'
         }
     }
})


页面效果:

wKioL1gLJXeTZM4OAACU_F16ll4819.png


添加图片SRC地址

给img标签的src属性赋值时,按照传统的方法`url`:

HTML代码:

1
< img  class = "box"  src = "`url`"  alt = "" >


JS代码:

1
2
3
4
5
6
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

wKiom1gLKJPD1XHwAACC8OiRT9Y083.png


使用 v-bind:src  再来试试看

HTML代码:

1
< img  class = "box"  :src = "url"  alt = "" >


查看页面截图:
wKioL1gLKTuSVDu_AABbyo9XNJc308.png




本文转自   frwupeng517   51CTO博客,原文链接:http://blog.51cto.com/dapengtalk/1864584

相关文章
|
3月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
3月前
|
监控 JavaScript 前端开发
确定使用 `defer` 属性还是 `async` 属性来异步加载 JavaScript
【10月更文挑战第24天】选择使用 `defer` 属性还是 `async` 属性来异步加载 JavaScript 是一个需要综合考虑多个因素的决策。需要根据脚本之间的依赖关系、页面加载性能要求、脚本的功能和重要性等因素来进行权衡。在实际应用中,需要通过测试和验证来确定最适合的加载方式,以提供更好的用户体验和页面性能。
103 56
|
3月前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中,合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法,有效提升应用的响应性和可维护性。
|
3月前
|
监控 JavaScript 前端开发
使用 `defer` 属性异步加载 JavaScript
【10月更文挑战第24天】使用 `defer` 属性异步加载 JavaScript 是一种有效的提高页面性能和用户体验的方法。通过合理设置 `defer` 属性,可以在不影响页面渲染的情况下异步加载脚本,并确保脚本的执行顺序。在实际应用中,需要根据具体情况选择合适的加载方式,并注意处理可能出现的问题,以确保页面能够正常加载和执行。
|
4月前
|
监控 JavaScript 开发者
在 Vue 中,子组件为何不可以修改父组件传递的 Prop,如果修改了,Vue 是如何监控到属性的修改并给出警告的
在 Vue 中,子组件不能直接修改父组件传递的 Prop,以确保数据流的单向性和可预测性。如果子组件尝试修改 Prop,Vue 会通过响应式系统检测到这一变化,并在控制台发出警告,提示开发者避免这种操作。
|
4月前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
120 4
|
4月前
|
JavaScript 前端开发 开发者
VUE学习一:初识VUE、指令、动态绑定、计算属性
这篇文章主要介绍了Vue.js的基础知识,包括初识Vue、指令如v-for、v-on的使用、动态属性绑定(v-bind)、计算属性等概念与实践示例。
75 1
|
4月前
|
缓存 JavaScript 前端开发
探索Vue.js中的计算属性与侦听器
【10月更文挑战第5天】探索Vue.js中的计算属性与侦听器
46 1
|
4月前
|
缓存 JavaScript Serverless
vue中computed计算属性、watch侦听器、methods方法的区别以及用法
vue中computed计算属性、watch侦听器、methods方法的区别以及用法
241 0
|
4月前
|
存储 JavaScript 前端开发
js中map属性
js中map属性
36 0

热门文章

最新文章