Vue-Tag-Attribute und bedingtes Rendering von Vue.js

Dieses Mal werde ich Ihnen die Vue-Tag-Attribute und das bedingte Rendering von Vue.js vorstellen. Das Folgende ist ein praktischer Fall Schauen Sie einmal vorbei.

v-bind

EreignisBindung

Normales Schreiben

<a></a>

Abkürzung

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

Codebeispiel

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

Implementierungseffekt:

V-Bind-Ereignisbindung

Allgemeine Verwendung von V-Bind, Bindungsklasse

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

Die durch v-bind gebundene Klasse steht nicht in Konflikt mit der ursprünglichen Klasse

<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-Bindung Der Klasseninhalt kann ein Array sein

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

Der durch v-bind gebundene Klasseninhalt kann ein Array sein

Es gibt tatsächlich diese Operation ... Die folgende Operation ist rein energiereich !!

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

Sie können auch so schreiben

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

v-bind ändert den Stil durch Inline-Stile

<template>
  <div id="myapp">
    <a class="link-href" :style="linkClass">百度一下,你就上当</a>
  </div></template><script>
  export default {    data: function () {      return {        linkClass: {          &#39;color&#39;: &#39;red&#39;,          &#39;font-size&#39;: &#39;20px&#39;
        }
      }
    }
  }</script>

Inline-Stile ändern

v-if 和 v-show
<template>  <div id="myapp">    <a v-if="isPartA">partA</a>    <a v-show="!isPartA">partB</a>    <button v-on:click="toggle">切换</button>  </div></template><script>  export default {    data: function () {      return {        isPartA: true      }    },    methods: {      toggle () {        this.isPartA = !this.isPartA      }    }  }</script>

v-if und v-else können ebenfalls das oben Genannte erreichen

Das obige ist der detaillierte Inhalt vonVue-Tag-Attribute und bedingtes Rendering von Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!