1. 程式人生 > >vue學習筆記(一)---- vue指令( v-bind 屬性繫結 )

vue學習筆記(一)---- vue指令( v-bind 屬性繫結 )

**看栗子:** ```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. 如果想要實現單純的表示式的拼接,一定要用引號包裹起來,否則會被當作變數來解析,在被當作變數解析的情況下,可以再重新自定義屬性的值然後再拼