详解VUE中v-bind的基本用法
程序员文章站
2022-05-26 08:23:01
这两天学习了v-bind的基本用法，所以，今天添加一点小笔记。
1. v-bind:class（根据需求进行选择）
1.1
这两天学习了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。