详解VUE中v-bind的基本用法
更新时间：2017年07月13日 17:13:30 作者：薛伟杰
本篇文章主要介绍了详解VUE中v-bind的基本用法 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
这两天学习了v-bind的基本用法，所以，今天添加一点小笔记。
1. v-bind:class（根据需求进行选择）
1.1
<style>
.box{
background-color: #ff0;
}
.textColor{
color: #000;
}
.textSize{
font-size: 30px;
}
</style>
<div id="app">
<span class="box" :class="{'textColor':isColor, 'textSize':isSize}">我是字</span>
</div>
<script>
new Vue({
el: "#app",
data:{
isColor:true,
isSize:true
}
})
</script>
1.2
<style>
.box{
background-color: #ff0;
}
.textColor{
color: #000;
}
.textSize{
font-size: 30px;
}
</style>
<div id="app">
<span class="box" :class="classObject">我是字</span>
</div>
<script>
new Vue({
el: "#app",
data:{
classObject:{
'textColor': true,
'textSize': true
}
}
})
</script>
1.3
<style>
.box{
background-color: #ff0;
}
.textColor{
color: #0f0;
}
.textSize{
font-size: 30px;
}
</style>
<div id="app">
<span class="box" :class="[classA,classB]">我是字</span>
</div>
<script>
new Vue({
el: "#app",
data:{
classA: 'textColor',
classB: 'textSize'
}
})
</script>
1.4
<style>
.box{
background-color: #ff0;
}
.textColor{
color: #0f0;
}
.textSize{
font-size: 30px;
}
</style>
<div id="app">
<span class="box" :class="[isA?classA:'', classB]">我是字</span>
</div>
<script>
new Vue({
el: "#app",
data:{
classA: 'textColor',
classB: 'textSize',
isA: false
}
})
</script>
2.v-bind:style (根据需求进行选择，驼峰式)
2.1
<div id="app">
<span class="box" :style="{color:activeColor, fontSize:size,textShadow:shadow}">我是字</span>
</div>
<script>
new Vue({
el: "#app",
data:{
activeColor: 'red',
size: '30px',
shadow: '5px 2px 6px #000'
}
})
</script>
2.2
<div id="app">
<span class="box" :style="styleObject">我是字</span>
</div>
<script>
new Vue({
el: "#app",
data:{
styleObject:{
color: 'red',
fontSize: '30px',
textShadow: '5px 2px 6px #000'
}
}
})
</script>
2.3
<div id="app">
<span class="box" :style="[styleA,styleB]">我是字</span>
</div>
<script>
new Vue({
el: "#app",
data:{
styleA:{
fontSize: '30px',
color: 'red'
},
styleB:{
textShadow: '5px 2px 6px #000'
}
}
})
</script>
2.4
<div id="app">
<span class="box" :style="[isA?styleA:'', styleB]">我是字</span>
</div>
<script>
new Vue({
el: "#app",
data:{
styleA:{
fontSize: '30px',
color: 'red'
},
styleB:{
textShadow: '5px 2px 6px #000'
},
isA: false
}
})
</script>
3.v-bind:src
<div id="app">
<img :src="url" />
</div>
<script>
new Vue({
el: "#app",
data:{
url: "../img/pg.png"
}
})
</script>
4.v-bind:title
<div id="app">
<div :title="message">我是字</div>
</div>
<script type="text/javascript">
new Vue({
el: "#app",
data:{
message:"我是吱吱"
}
})
</script>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
mitt又称事务总线,是第三方插件,这篇文章主要为大家详细介绍了Vue3中事件总线mitt的使用方式,感兴趣的小伙伴可以跟随小编一起学习一下2025-03-03
Vue中的scoped和 elememt-plus的样式修改方法
Vue中的scoped属性用于实现样式隔离,确保组件间的样式互不影响,通过在组件的style标签内添加任何内容,可以为组件生成一个唯一的哈希值,从而实现样式的定位,本文通过实例代码讲解Vue中的scoped和 elememt-plus的样式修改方法,感兴趣的朋友一起看看吧2025-01-01
这篇文章主要为大家介绍了Vue3插槽Slot实现原理详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
Vue v-for中的 input 或 select的值发生改变时触发事件操作
这篇文章主要介绍了Vue v-for中的 input 或 select的值发生改变时触发事件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要介绍了Django+Vue跨域环境配置详解,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
本篇文章主要介绍了VueJS如何引入css或者less文件的一些坑，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
这篇文章主要介绍了Vue实现上下层叠轮播图，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了Vue实现todolist删除功能,，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-06-06
这篇文章主要介绍了antd Form组件表单在vue3中的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
SVG全称Scalable Vector Graphics,它是网络上使用最广泛的矢量图格式,在项目开发过程中,我们经常会用到svg矢量图,而且我们使用svg以后,页面上加载的不再是图片资源,本文将给大家介绍Vue3中引入、封装和使用svg矢量图的实现示例,需要的朋友可以参考下2024-07-07
最新评论