vue學習筆記(一)---- vue指令( v-bind 屬性繫結 )
阿新 • • 發佈:2020-10-24
**看栗子:**
```html
```
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20201016092756571.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MTAzNjEy,size_16,color_FFFFFF,t_70#pic_center)
*想把 `mytitle`所代表的 `title`值放到 `< input />`的 `title`中去*
**錯誤方式:**
```html
```
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/2020101609290558.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MTAzNjEy,size_16,color_FFFFFF,t_70#pic_center)
直接在`title`屬性中放入`mytitle`的話,`mytitle`會當當作字串解析,並不會得到我們想要的`mytitle`的值
**正確方式:**
```html
```
**來吧展示:**
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20201016094446768.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MTAzNjEy,size_16,color_FFFFFF,t_70#pic_center)
**自定義繫結多個屬性:**
```html
```
**來吧展示:**
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20201016095004359.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MTAzNjEy,size_16,color_FFFFFF,t_70#pic_center)
在屬性v-bind中,如果想要寫入一段內容,不能直接寫入,要用單引號包裹起來,否則會被當作變數去找,找不到這個變數的值會報錯
**錯誤的方式:**
直接在後面拼接內容
```html
```
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20201016100332502.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MTAzNjEy,size_16,color_FFFFFF,t_70#pic_center)
**正確寫法:**
用引號去包裹想要拼接的內容
```html
```
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/2020101610050210.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MTAzNjEy,size_16,color_FFFFFF,t_70#pic_center)
*那麼問題來咯,如果拼接的內容不加引號的話,變數是不是可以自定義呢,yeah~~~,可以滴*
```html
```
**來吧展示:**
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20201016101028777.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MTAzNjEy,size_16,color_FFFFFF,t_70#pic_center)
>總結:`v-bind`的用法:
>1.v-bind:屬性名稱 = "自定義屬性名稱"
> 比如:v-bind:title="mytitle"
>2.可以省略`v-bind`,用`:`代替 ,可以簡寫成 :屬性名稱 = "自定義屬性名稱"
>比如: :title="mytitle"
>3. 如果想要實現單純的表示式的拼接,一定要用引號包裹起來,否則會被當作變數來解析,在被當作變數解析的情況下,可以再重新自定義屬性的值然後再拼