Vue タグの属性と Vue.js の条件付きレンダリング

今回は、Vue.js の vue タグ属性と条件付きレンダリングについて説明します。 以下は、Vue.js の vue タグ属性と条件付きレンダリングを使用する際に注意すべき点です。見て。 v-bind

イベント

バインディング通常の書き方

<a></a>

略語

<a>百度一下,你就上当</a>

コード例

<script>
  export default {    data: function () {      return {        link: &#39;https://wwww.baidu.com&#39;,        title: &#39;title : 百度一下,你就知道&#39;
      }
    }
  }</script>

実装効果:

v-bindイベントバインディング

v-bind、bindの一般的な使用法クラスv-bind でバインドされたクラスの内容は、配列にすることができます

実際には、次の操作は純粋に高機能です。 !!

<template>
  <div id="myapp">
    <a v-bind:class="classStr">百度一下,你就上当</a>
  </div></template><script>
  export default {    data: function () {      return {        classStr: &#39;red-font&#39;
      }
    }
  }</script>

このように書くこともできます

<template>
  <div id="myapp">
    //class="link-href" v-bind:class="classStr"连个不存在冲突    <a class="link-href" v-bind:class="classStr">百度一下,你就上当</a>
  </div></template><script>
  export default {    data: function () {      return {        classStr: &#39;red-font&#39;
      }
    }
  }</script>

v-bindでインラインスタイルを通してスタイルを変更する

<template>
  <div id="myapp">
    <a class="link-href" v-bind:class="className">百度一下,你就上当</a>
  </div></template><script>
  export default {    data: function () {      return {        className: [&#39;red-font&#39;, &#39;big-font&#39;]
      }
    }
  }</script>

インラインスタイルを変更する

<template>
  <div id="myapp">
    <a class="link-href" :class="[classA, classB]">百度一下,你就上当</a>
  </div></template><script>
  export default {    data: function () {      return {        classA: &#39;hello&#39;,        classB: &#39;word&#39;
      }
    }
  }</script>

v-ifとv-elseでも上記のことを実現できます

以上がVue タグの属性と Vue.js の条件付きレンダリングの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。