Attributs de balise Vue et rendu conditionnel de Vue.js

Cette fois, je vous présente les attributs de la balise vue et le rendu conditionnel de Vue.js. Quelles sont les précautionsVoici les cas pratiques. jetez un oeil une fois.

v-bindÉvénementReliure

Écriture normale

<a></a>

Abréviation

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

Exemple de code

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

Effet d'implémentation :

Liaison d'événement v-bind

Utilisation courante de v-bind, classe de liaison

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

La classe liée par v-bind n'est pas en conflit avec la classe d'origine

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

liaison v-bind Le contenu de la classe peut être un tableau

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

Le contenu de la classe lié par v-bind peut être un tableau

Il y a en fait cette opération... L'opération suivante est purement à haute énergie !!

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

Vous pouvez également écrire comme ceci

<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 modifie le style via des styles en ligne

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

Modifier les styles en ligne

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 et v-else peuvent également réaliser ce qui précède

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!