首頁  >  文章  >  web前端  >  VUE中v-bind的用法介紹

VUE中v-bind的用法介紹

不言
不言原創
2018-06-29 14:06:232086瀏覽

這篇文章主要介紹了詳解VUE中v-bind的基本用法 ,內容挺不錯的,現在分享給大家,也給大家做個參考。

這兩天學習了v-bind的基本用法,所以,今天再加一點小筆記。

1. v-bind:class(根據需求選擇)

#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 (依需求選擇,駝峰式)

# 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>

#以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!

相關推薦:

###Vue.js結合Ueditor富文本編輯器的使用方法###############vue的專案最佳化之透過keep-alive資料快取的方法###############Vue元件選項props的使用介紹#################### #######

以上是VUE中v-bind的用法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn