Vue tag attributes and conditional rendering of Vue.js

This time I will bring you the vue tag attributes and conditional rendering of Vue.js. Using the vue tag attributes and conditional rendering of Vue.jsWhat are the precautions?The following is a practical case, let’s take a look one time.

v-bindEventBinding

Normal writing

<a></a>

Abbreviation

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

Code example

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

Implementation effect:

v-bind event binding

Common usage of v-bind, binding class

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

The class bound by v-bind does not conflict with the original class

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

The content of the class bound by v-bind can be an array

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

The content of the class bound by v-bind can be an array

There is actually this operation...The following operation is purely high-energy!!!

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

It can also be like this Write

<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 to change style through inline style

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

Modify inline style

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 and v- else can also achieve the above

The above is the detailed content of Vue tag attributes and conditional rendering of Vue.js. For more information, please follow other related articles on the PHP Chinese website!