vueベースの動的バインディング属性v-bind命令

vバインド、

1つ以上の属性、またはコンポーネントプロップを式に動的にバインドします。

	<div id="app">
	   <a href="http://www.baidu.com">百度一下</a>
	    <br>
	    //和上面a标签中的href属性赋值一样的效果
	    //v-bind:加属性名=“变量名”
	    <a v-bind:href="aHref">百度一下</a>
	  </div>
	  <script>
	  	const app = new Vue({
	  		el: '#app',
	  		data: {
	  			aHref: 'http://www.baidu.com'
	  		}
	  	})
	  </script>

v-bindは開発でよく使用されるため、公式の略語もあります。v-bind：attribute =：attribute

	//v-bind缩写也能得到同样的效果
	<a v-bind:href="aHref">v-bind百度一下</a>
    <a :href="aHref">v-bind百度一下</a>

クラスまたはスタイル属性をバインドする場合、配列やオブジェクトなど、他のタイプの値がサポートされます。

バインディングクラス

<div :class="{ active : isActive}">动态绑定属性--class类名</div>
<div :class="{ active : isActive, line: !isActive}">isActive为true，绑定active类名，line类名不绑定</div>
//直接绑定类名如果过长，也可放进函数methods里面,获取类名的对象，和上面是一样的结果。
<div :class="getClasss()">动态绑定属性--class类名</div>
<script>
  	const app = new Vue({
  		el: '#app',
  		data: {
  			isActive: true
  		},
  		methods: {
			getClasss: function () {
				return { active : this.isActive, line: !this.isActive};
			}
		}
  	})
  </script>

オブジェクトを動的にバインドするだけでなく、クラス名は配列をバインドすることもできます。

//在属性中是数组的话，加上引号，就和class=“active line”一样的效果
<div :class="['active', 'line']">112233</div>
//如果不加上引号就是变量
<div :class="[active, line]">112233</div>
<div :class="getClasss()">动态绑定属性--放进函数方法获取class类名</div>
<script>
  	const app = new Vue({
  		el: '#app',
  		data: {
  			isActive: true,
  			active: 'active',
  			line: 'line'
  		},
  		methods: {
			getClasss: function () {
				return [ this.active , this.line ];
			}
		}
  	})
  </script>

バインディングスタイル

<div :style="{ fontSize: size + 'px' }"></div>
<div :class="{ active : isActive, line: !isActive}">isActive为true，绑定active类名，line类名不绑定</div>
<script>
  	const app = new Vue({
  		el: '#app',
  		data: {
  			size : '18'
  		}
  	})
 </script>

もちろん、コンポーネントプロップバインディングがあります。後でゆっくりと学習してください！