今回は、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、bindの一般的な使用法クラスv-bind でバインドされたクラスの内容は、配列にすることができます
実際には、次の操作は純粋に高機能です。 !!
<template> <div id="myapp"> <a v-bind:class="classStr">百度一下,你就上当</a> </div></template><script> export default { data: function () { return { classStr: 'red-font' } } }</script>
このように書くこともできます
<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でインラインスタイルを通してスタイルを変更する
<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>
<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>
以上がVue タグの属性と Vue.js の条件付きレンダリングの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。