Vue知识点总结(3)——v-bind(超级详细)
2023-09-11 14:18:53 时间
v-bind指令的作用就是绑定数据和元素属性,应用也比较频繁。
它可以绑定在大部分组件的属性上。
<div id="app">
<a v-bind:href='res.url'>{{res.name}}</a>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
res:{
name:'百度',
url:'https://www.baidu.com'
},
}
});
</script>
这是v-bind最基本的用法,这种情况下必须这样使用,不然a组件会把href属性中的res.url解析为字符串,而不是变量。
加v-bind后解析出来的DOM结构。
不加v-bind解析出来的DOM结构。
因为v-bind使用很频繁,它还有一种简写方式,就是
<a :href='res.url'>{{res.name}}</a>
效果一样。
v-bind不止可以绑定变量,也可以绑定对象。
<style>
.active {
color:#f00;
}
</style>
<div id="app">
<h3 v-bind:class="{active:isActive}">v-bind的用法</h3>
<h4 :style='{color:Color,fontSize:fontSize + "px"}'>aaaabbbb</h4>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
isActive:true,
Color:'green',
fontSize:'50'
}
});
</script>
在h3标签中,我们给它绑定了一个动态的class属性active。当isActive的值为true的时候,这个class属性才会被挂载到标签上。
在h4标签中,我们同样给组件的style属性绑定了动态的属性值,Color和fontSize的大小都可以随便更改,只有把v-bind绑定在style属性上,它才会被解析为动态变量值,否则一样会被解析为一堆字符串。
v-bind的用法大概就是这些。用法比较简单,但是实用性很强。你会在很多的业务场景下使用它,前提是你要足够了解它。
有微信小程序课设、毕设需求联系个人QQ:505417246
关注下面微信公众号,可以领取微信小程序、Vue、TypeScript、前端、uni-app、全栈、Nodejs、Python等实战学习资料
相关文章
- Vue中使用节流Lodash throttle
- Vue——vue中的双向数据绑定
- Vue技能树使用情况测评及建议
- Vue2.0 搭建Vue脚手架(vue-cli)
- 【前端芝士树】Vue.js面试题整理 / 知识点梳理
- 手把手教你vue配置请求本地json数据
- Vue项目 跨域 解决方案与 vue.config.js 配置解析
- Vue知识点总结(5)——v-model(超级详细)
- Vue知识点总结(20)——nextTick的基本概念和实际应用(超级详细)
- Vue知识点总结(9)——局部组件的创建和使用(超级详细)
- Vue知识点总结(8)——filter过滤器(超级详细)
- 【Vue】vue基础语法——自定义指令、过滤、组件和动画(内附详细案例代码)——day04
- vue学习笔记六:Jquery VS Vue之网络请求明细对照
- vue学习笔记四:Jquery VS Vue之元素操作明细对照
- vue数组对象修改触发视图更新
- vue问题解决:Vue packages version mismatch 版本始终不对的解决
- Django+Vue项目学习第二篇:vue项目创建
- Vue学习第37天——.sync修饰符、$attrs和$listeners属性的使用场景和案例