#このチュートリアルの動作環境: Windows7 システム、vue3 バージョン、DELL G3 コンピューター。追加方法: 1. ":class="['クラス名']" ステートメントを使用して追加します。 2. ":class="['クラス名 1','クラス名 2', {属性名 (クラス名):'属性値 (true または false)}]"" ステートメントを使用します。 3. ":class="{属性名 (クラス名):true}" ステートメントを使用します。 4. 「:style」を使用します。 ="{ 'スタイル名':'スタイル値'}"" ステートメント; 5. 追加するには、":style="style"" ステートメントを使用します; 6. ":style="[data]"" ステートメントを使用します。
<h1 :class = "['类名1','类名2']">这种方法 需要用 v-bind: => : 绑定</h1>
<h1 :class = "['类名1','类名2',表达式?'类名3':'']">这种方法 需要用 v-bind: => : 绑定</h1>
<h1 :class = "['类名1','类名2',{属性名(类名):'属性值(true或false)}]">这种方法 需要用 v-bind: => : 绑定</h1>
<h1 :class = "{属性名(类名1):true,属性名(类名2):true}">这种方法 需要用 v-bind: => : 绑定</h1>
<h1 :style = "{'样式名':'样式值'}">这种方法 需要用 v-bind: => : 绑定</h1>
2.スタイル オブジェクトをデータに定義し、:style
<h1 :style = "vue里的样式">这种方法 需要用 v-bind: => : 绑定</h1>
3 で参照します。:style では、配列を通じてデータ上の複数のスタイル オブジェクトを参照します。
<h1 :style = "[data1,data2]">这种方法 需要用 v-bind: => : 绑定</h1>
コード例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Vue样式的运用</title> <style> * { margin: 0; padding: 0; } .box { width: 150px; height: 150px; background: skyblue; line-height: 150px; text-align: center; } .border { border-radius: 50%; } .color { color: #fff; font-size: 24px; } </style> </head> <body> <div id="app"> <button @click="tagger = !tagger">切换</button> <!-- 添加样式/切换样式 --> <!-- 对象方式 border 数据模型 tagger 真假 真显示 假隐藏--> <!-- <div class="box" :class="{'border':tagger}">添加style样式</div> --> <!-- 表达式 --> <!-- <div :class="tagger ? 'border' : ''" class="box">添加style样式</div> --> <!-- 数组 --> <div :class="tagger ? ['box','border'] : ['box']">添加style样式</div> </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script> let vm = new Vue({ el: '#app', data: { tagger : true, vstyle : ['border','box'], vObj : {"border":true,"color":true,"box":true} }, methods: { } }) </script> </body> </html>
(学習ビデオ共有: vuejs 入門チュートリアル、
基本プログラミング ビデオ以上がvue で要素にスタイルを追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。