Home >Web Front-end >JS Tutorial >Introduction to the usage of v-bind in VUE

Introduction to the usage of v-bind in VUE

不言
不言Original
2018-06-29 14:06:232104browse

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="{&#39;textColor&#39;:isColor, &#39;textSize&#39;: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:{
  &#39;textColor&#39;: true,
  &#39;textSize&#39;: 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: &#39;textColor&#39;,
    classB: &#39;textSize&#39;
  }
})
</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:&#39;&#39;, classB]">我是字</span>
</p>
<script>
new Vue({
  el: "#app",
  data:{
    classA: &#39;textColor&#39;,
    classB: &#39;textSize&#39;,
    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: &#39;red&#39;,
      size: &#39;30px&#39;,
      shadow: &#39;5px 2px 6px #000&#39;
    }
})
</script>

2.2

<p id="app">
  <span class="box" :style="styleObject">我是字</span>
</p>
<script>
new Vue({
  el: "#app",
  data:{
    styleObject:{
    color: &#39;red&#39;,
    fontSize: &#39;30px&#39;,
    textShadow: &#39;5px 2px 6px #000&#39;
    }
  }
})
</script>

2.3

<p id="app">
  <span class="box" :style="[styleA,styleB]">我是字</span>
</p>
<script>
new Vue({
  el: "#app",
  data:{
    styleA:{
      fontSize: &#39;30px&#39;,
      color: &#39;red&#39;
    },
    styleB:{
      textShadow: &#39;5px 2px 6px #000&#39;
    }
  }
})
</script>

2.4

<p id="app">
  <span class="box" :style="[isA?styleA:&#39;&#39;, styleB]">我是字</span>
</p>
<script>
new Vue({
  el: "#app",
  data:{
    styleA:{
      fontSize: &#39;30px&#39;,
      color: &#39;red&#39;
    },
    styleB:{
      textShadow: &#39;5px 2px 6px #000&#39;
    },
    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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn