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

v-bind事件绑定

正常写法

<a v-bind:href="link" v-bind:title="hello"></a>

简写

<a :href="link" :title="title">百度一下,你就上当</a>

代码示例

<template>
 <div id="myapp">
 <!--<a v-bind:href="link" v-bind:title="hello"></a>-->
 <!--简写-->
 <a :href="link" :title="title">百度一下,你就上当</a>
 </div></template><script>
 export default { data: function () { return { link: 'https://wwww.baidu.com', title: 'title : 百度一下,你就知道'
 }
 }
 }</script>

实现效果:

v-bind事件绑定

v-bind常用的用法,绑定class

<template>
 <div id="myapp">
 <a v-bind:class="classStr">百度一下,你就上当</a>
 </div></template><script>
 export default { data: function () { return { classStr: 'red-font'
 }
 }
 }</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: 'red-font'
 }
 }
 }</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: ['red-font', 'big-font']
 }
 }
 }</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: 'hello', classB: 'word'
 }
 }
 }</script>

还可以这样写

<template>
 <div id="myapp">
 <a class="link-href" :class="[classA, {'red-font': hasError}]">百度一下,你就上当</a>
 </div></template><script>
 export default { data: function () { return { classA: 'hello', 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: { 'color': 'red', 'font-size': '20px'
 }
 }
 }
 }</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也能实现上面