首頁 > web前端 > js教程 > 主體

Vue.js的vue標籤屬性與條件渲染

php中世界最好的语言
發布: 2018-03-13 14:06:10
原創
5846 人瀏覽過

這次帶給大家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.js的vue標籤屬性與條件渲染

v-bind事件綁定

v-bind常用的用法,綁定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>
登入後複製

Vue.js的vue標籤屬性與條件渲染

v-bind綁定的class和原來的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>
登入後複製

Vue.js的vue標籤屬性與條件渲染

v-bind綁定的class內容可以是一個陣列

<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>
登入後複製

v-bind綁定的class內容可以是一個陣列

竟然還有這操作.....以下操作純屬高能!!!

<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>
登入後複製

還可以這樣寫

<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透過內聯樣式改變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>
登入後複製

修改內聯樣式

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和v- else也能實作上面

以上是Vue.js的vue標籤屬性與條件渲染的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!