Heim > Web-Frontend > js-Tutorial > Einführung in die Verwendung von v-bind in VUE

Einführung in die Verwendung von v-bind in VUE

不言
Freigeben: 2018-06-29 14:06:23
Original
2108 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich die grundlegende Verwendung von V-Bind in VUE vor. Der Inhalt ist ziemlich gut, ich werde ihn jetzt mit Ihnen teilen und als Referenz verwenden.

Ich habe in den letzten zwei Tagen die grundlegende Verwendung von V-Bind gelernt, daher werde ich heute ein paar Anmerkungen hinzufügen.

1. v-bind:class (je nach Bedarf auswählen)

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

2.v-bind:style (je nach Bedarf auswählen, 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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

3.v-bind :src

<p id="app">
  <img :src="url" />
</p>
<script>
  new Vue({
    el: "#app",
    data:{
      url: "../img/pg.png"
    }
})
</script>
Nach dem Login kopieren

4.v-bind:title

<p id="app">
  <p :title="message">我是字</p>
</p>  
<script type="text/javascript">
  new Vue({
  el: "#app",
  data:{
    message:"我是吱吱"
  }
  })
</script>
Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

So verwenden Sie Vue.js in Kombination mit dem Rich-Text-Editor Ueditor

Vue-Projektoptimierungsmethode von Caching von Keep-Alive-Daten

Einführung in die Verwendung von Vue-Komponentenoptions-Requisiten

Das obige ist der detaillierte Inhalt vonEinführung in die Verwendung von v-bind in VUE. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage