VUE での v-bind の使用法の概要

この記事では主に VUE での v-bind の基本的な使い方を紹介します。とても良い内容なので、参考にしてください。

この2日間で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

りー

1.4

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

2.v-bind:style (必要に応じて選択、キャメルケース)

2.1

<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.2

<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.3

りー

2.4

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

3.v-bind:src

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

4.v-bind:title

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

上記が全内容ですこの記事が皆さんの学習に役立つことを願っています。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。

関連する推奨事項:

Vue.js を Ueditor リッチ テキスト エディターと組み合わせて使用​​する方法

キープアライブ データ キャッシュによる vue プロジェクトの最適化方法

Vue コンポーネント オプション 小道具の使用方法の紹介

以上がVUE での v-bind の使用法の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。