Attributs de balise Vue et rendu conditionnel de Vue.js-js tutoriel-php.cn

Attributs de balise Vue et rendu conditionnel de Vue.js

php中世界最好的语言

Libérer： 2018-03-13 14:06:10

original

5860 Les gens l'ont consulté

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>

Copier après la connexion

Abréviation

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

Copier après la connexion

Exemple de code

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

Copier après la connexion

Effet d'implémentation :

Attributs de balise Vue et rendu conditionnel de Vue.js

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>

Copier après la connexion

Attributs de balise Vue et rendu conditionnel de Vue.js

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>

Copier après la connexion

Attributs de balise Vue et rendu conditionnel de Vue.js

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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!