這次帶給大家Vue.js的vue標籤屬性和條件渲染，使用Vue.js的vue標籤屬性和條件渲染注意事項有哪些，下面就是實戰案例，一起來看一下。
v-bind事件綁定
#正常寫法
<a></a>
簡寫
<a>百度一下,你就上当</a>
程式碼範例
<a>百度一下,你就上当</a><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也能實作上面
以上是Vue.js的vue標籤屬性與條件渲染的詳細內容。更多資訊請關注PHP中文網其他相關文章！
