Vue.js的vue标签属性和条件渲染

这次给大家带来Vue.js的vue标签属性和条件渲染，使用Vue.js的vue标签属性和条件渲染注意事项有哪些，下面就是实战案例，一起来看一下。

v-bind事件绑定

正常写法

d48122d1327e73f897ce68ce8e1ac4805db79b134e9f6b82c0b36e0489ee08ed

简写

91a3496345240abe485cd81b556f5539百度一下,你就上当5db79b134e9f6b82c0b36e0489ee08ed

代码示例

d477f9ce7bf77f53fbcf36bec1b69b7a
  1409e0243119670c04d428bd611d17db
    <!--d48122d1327e73f897ce68ce8e1ac4805db79b134e9f6b82c0b36e0489ee08ed-->
    1cfa39e26461705bc555d72a864a422b
    91a3496345240abe485cd81b556f5539百度一下,你就上当5db79b134e9f6b82c0b36e0489ee08ed
  16b28748ea4df4d9c2150843fecfba6821c97d3a051048b8e55e3c8f199a54b23f1c4e4b6b16bbbd69b2ee476dc4f83a
  export default {    data: function () {      return {        link: 'https://wwww.baidu.com',        title: 'title : 百度一下,你就知道'
      }
    }
  }2cacc6d41bbb37262a98f745aa00fbf0

实现效果:

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>

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>

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中文网其他相关文章！