Vue ⑅：v-bind 动态绑定 HTML 属性

如标题 (⑅•ᴗ•⑅)
v-bind 可以动态绑 HTML 属性、将资料传递到元素上。
　

几个重点 ( 官方文件参照 ★ )

v-bind 可以直接缩写成 「：」他可以传入我们放在 data内的资料到 HTML可以使用各种 JS 的表达式 。
　

来透过範例， 看看他可以干嘛吧 ♪

⑅ 放图片

<div id="app"><img v-bind:src="imgUrl"><!-- ♡。可以缩写，把 v-bind 省略掉 --><img :src="imgUrl"></div>

const vm = new Vue({el: '#app',data: {imgUrl: '图片网址'}})

抠Pen长这样 ：

　
　

⑅ 眼尖ㄉ各位或许看到 上面写了 :value

一开始有提到v-bind 可以传表达式结果，
什么是表达式？ 像我们平常运算也可以算是一种表达式

範例：

<div id="app">  <input type="text" :value="text">  <input type="text" :value="(1+1)*100"></div>

const vm = new Vue({  el: '#app',  data: {    text: '喵呜',  }})

　
　

⑅ v-bind 很常用 之 动态调整class

v-bind 还有个功能，它可以用判断式 达到切换class 效果 。
直接範例会比较好懂 ♫

题目：按按钮之后，我的 box 会变颜色 ( 新增class 的方式 )。

製作步骤：

( CSS ) 先写好你要变色的 class 样式。( JS ) vue 物件中的data 建立一个値为 false 的资料。( HTML ) 到按钮处，绑上 v-on 。当我按按钮，资料的 false 会变成 true 。( HTML ) 到 box 处，用 v-bind 绑上class 样式，写法可能要硬记一下。
:class = "{ '你要新增的class' : data定义的资料 }"
　

<div id="app"><div class="box" :class="{ 'momo' : isMomo }"></div><input type="button" value="カラーチェンジ" @click='isMomo = !isMomo'></div><!--★　CSS　★--><style>.momo {background-color: #fa6f98;border: 1px solid #fa6f98 ;}</style><!--★　JS　★--><script>const vm = new Vue({el:'#app',data: {isMomo: false}})</script>

★ Codepen 附上 ゜･*

　
　
以上是 v-bind 的简单介绍 。。