Home >Web Front-end >JS Tutorial >Introduction to the usage of v-bind in VUE
This article mainly introduces the basic usage of v-bind in VUE. The content is quite good. I will share it with you now and give it as a reference.
I have learned the basic usage of v-bind in the past two days, so I will add a few notes today.
1. v-bind:class (select according to your needs)
1.1
<style> .box{ background-color: #ff0; } .textColor{ color: #000; } .textSize{ font-size: 30px; } </style> <p id="app"> <span class="box" :class="{'textColor':isColor, 'textSize':isSize}">我是字</span> </p> <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> <p id="app"> <span class="box" :class="classObject">我是字</span> </p> <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> <p id="app"> <span class="box" :class="[classA,classB]">我是字</span> </p> <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> <p id="app"> <span class="box" :class="[isA?classA:'', classB]">我是字</span> </p> <script> new Vue({ el: "#app", data:{ classA: 'textColor', classB: 'textSize', isA: false } }) </script>
2.v-bind:style (select according to your needs, camel case)
2.1
<p id="app"> <span class="box" :style="{color:activeColor, fontSize:size,textShadow:shadow}">我是字</span> </p> <script> new Vue({ el: "#app", data:{ activeColor: 'red', size: '30px', shadow: '5px 2px 6px #000' } }) </script>
2.2
<p id="app"> <span class="box" :style="styleObject">我是字</span> </p> <script> new Vue({ el: "#app", data:{ styleObject:{ color: 'red', fontSize: '30px', textShadow: '5px 2px 6px #000' } } }) </script>
2.3
<p id="app"> <span class="box" :style="[styleA,styleB]">我是字</span> </p> <script> new Vue({ el: "#app", data:{ styleA:{ fontSize: '30px', color: 'red' }, styleB:{ textShadow: '5px 2px 6px #000' } } }) </script>
2.4
<p id="app"> <span class="box" :style="[isA?styleA:'', styleB]">我是字</span> </p> <script> new Vue({ el: "#app", data:{ styleA:{ fontSize: '30px', color: 'red' }, styleB:{ textShadow: '5px 2px 6px #000' }, isA: false } }) </script>
3.v-bind:src
<p id="app"> <img :src="url" /> </p> <script> new Vue({ el: "#app", data:{ url: "../img/pg.png" } }) </script>
##4.v-bind:title
<p id="app"> <p :title="message">我是字</p> </p> <script type="text/javascript"> new Vue({ el: "#app", data:{ message:"我是吱吱" } }) </script>The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website! Related recommendations:
How to use Vue.js combined with Ueditor rich text editor
Vue project optimization Method of caching through keep-alive data
Introduction to the use of Vue component option props
The above is the detailed content of Introduction to the usage of v-bind in VUE. For more information, please follow other related articles on the PHP Chinese website!