Vue タグの属性と Vue.js の条件付きレンダリング-jsチュートリアル-php.cn

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

php中世界最好的语言

リリース： 2018-03-13 14:06:10

オリジナル

5860 人が閲覧しました

今回は、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>

ログイン後にコピー

実装効果:

Vue タグの属性と Vue.js の条件付きレンダリング 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>

ログイン後にコピー

このように書くこともできます Vue タグの属性と Vue.js の条件付きレンダリング

<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でインラインスタイルを通してスタイルを変更する Vue タグの属性と Vue.js の条件付きレンダリング

<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 サイトの他の関連記事を参照してください。