vバインド
財団
以前に学習した命令の主な機能は、テンプレートのコンテンツに値を挿入することです。
ただし、コンテンツを動的に決定する必要があるだけでなく、特定のプロパティを動的にバインドする必要もあります。
たとえば、要素のhref属性を動的にバインドします
たとえば、img要素のsrc属性を動的にバインドします
現時点では、v-bindコマンドを使用できます。
目的：プロパティを動的にバインドする
略語::
预期：任意（引数付き）| オブジェクト（引数なし）
パラメーター：attrOrProp（オプション）
v-bindは、1つ以上のプロパティ値をバインドするか、props値を別のコンポーネントに渡すために使用されます（これは、コンポーネントについて学ぶときに紹介されます）
開発中、動的にバインドする必要がある属性は何ですか？
画像リンクsrc、ウェブサイトリンクhref、一部のクラス、スタイルなどを動的にバインドするなど、まだ多くあります。
たとえば、要素のsrcとhrefはVueインスタンスのデータを介してバインドされ、コードは次のようになります。
vバインド構文糖
v-bindには対応する構文糖があります。
開発では、より簡潔であるため、通常は構文糖という形式を使用します。
省略形は次のとおりです。
vバインドバインディングクラス
多くの場合、次のようにクラスを動的に切り替えます。
データが特定の状態にある場合、フォントは赤で表示されます。
データが別の状態の場合、フォントは黒で表示されます。
クラスをバインドする方法は2つあります。
オブジェクト構文
配列構文
（1）バインド方法：オブジェクト構文
オブジェクト構文の意味は次のとおりです。クラスの後にオブジェクトが続きます。
オブジェクト構文には次の使用法があります。
使用法1：{}を介してクラスを直接バインドする
<h2：class = "{'active'：isActive}"> Hello World </ h2>
使用法2：判断によって複数の値を渡すこともできます
<h2：class = "{'active'：isActive、 'line'：isLine}"> Hello World </ h2>
使用法3：通常のクラスと競合せずに共存する
注：isActiveとisLineの両方がtrueの場合、title / active / lineという3つのクラスがあります。
<h2 class = "title"：class = "{'active'：isActive、 'line'：isLine}"> Hello World </ h2>
使用方法4：複雑すぎる場合は、メソッドに配置するか計算することができます
注：クラスは計算された属性です
<h2 class = "title"：class = "classes"> Hello World </ h2>
（2）バインド方法：配列構文
配列構文の意味は次のとおりです。配列の後にクラスが続きます。
配列構文には次の使用法があります。
使用法1：{}を介してクラスを直接バインドする
<h2：class = "['active']"> Hello World </ h2>
使用法2：複数の値を渡すこともできます
<h2：class = "['active'、 'line']"> Hello World </ h2>
使用法3：通常のクラスと競合せずに共存する
注：タイトル/アクティブ/ラインの3つのカテゴリがあります
<h2 class = "title"：class = "['active'、 'line']"> Hello World </ h2>
使用方法4：複雑すぎる場合は、メソッドに配置するか計算することができます
注：クラスは計算された属性です
<h2 class = "title"：class = "classes"> Hello World </ h2>
ケース：vue v-forから出てくるリストで、現在をクリックすると、現在のクリックのフォントの色が変わります
<！DOCTYPE html > < html lang = "en" >
< 頭> < メタ文字セット= "UTF-8" > < メタ名= "viewport" content = "width = device-width、initial-scale = 1.0" > < meta http - equiv = "X-UA-Compatible" content = "ie = edge" > < タイトル> ドキュメント</ タイトル> < スタイル> 。アクティブ{ 色：赤; } </ スタイル> < スクリプトsrc = "../../js / vue.js" > </ スクリプト> </ 頭>
< ボディ> < div id = "アプリ" > < ul > < li v - for = "（m、item）in movies" > <a @click="btnClick(item)" :key="item" :class="{active:i===item}">{{item}}--{{m}}</a></li> </ul> </div>
<script> //创建Vue实例,得到 ViewModel var vm = new Vue({ el: '#app', data: { movies: ['海王', '星际穿越', '大话西游', '少年派', '盗梦空间'], i: 0, }, methods: { btnClick: function (index) { this.i = index; }, } }); </script> </body>
</html> |
v-bind 动态绑定style
我们可以利用v-bind:style来绑定一些CSS内联样式.
在写CSS属性名的时候, 比如font-size
我们可以使用驼峰式 (camelCase) fontSize
或短横线分隔 (kebab-case, 记得用单引号括起来) 'font-size'
绑定class有两种方式:
对象语法
数组语法
(1)绑定方式一: 对象语法
:style="{color: currentColor, fontSize: fontSize + 'px'}"
style后面跟的是一个对象类型
对象的key是CSS属性名称
对象的value是具体赋的值, 值可以来自于data中的属性
(2)绑定方式二: 数组语法
<div v-bind:style="[baseStyles, overridingStyles]"></div>
style后面跟的是一个数组类型
多个值以","分割即可