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

php中世界最好的语言
リリース: 2018-03-13 14:06:10
オリジナル
5863 人が閲覧しました

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート