vue指令?v-bind的使用和注意需要注意的點
1、v-bind:可以為元素的屬性綁定一些數(shù)據(jù)
<div id="app"> <p v-bind:title="message" v-bind:id="pId">我是p標簽</p> </div> <script src="./js/vue.js"></script> <script> let vm = new Vue({ el:"#app", data:{ message:"我是p標簽的title值", pId:"這是隨便給的id" } })
輸出為:
2、v-bind:可以簡寫成 : 推薦直接寫冒號
<div id="app"> <p :title="message" :id="pId">我是p標簽</p> </div> <script src="./js/vue.js"></script> <script> let vm = new Vue({ el:"#app", data:{ message:"我是p標簽的title值", pId:"這是隨便給的id" } })
輸出和上面結(jié)果相同
3、v-bind:指令表達式的拼接,
如果想要實現(xiàn)表達式的拼接,被拼接的字符串一定要被引號包裹起來,否則會被當做變量解析
不加引號:
報錯:[Vue warn]: Property or method "這是追加的id" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
加引號:
<p title="200" :title="message" :id="pId+'這是追加的id'">我是p標簽</p>
輸出結(jié)果:
到此這篇關于 v-bind
的使用和注意需要注意的點的文章就介紹到這了,更多相關 v-bind的使用和注意點內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
VUE 實現(xiàn)element upload上傳圖片到阿里云
這篇文章主要介紹了VUE 實現(xiàn)element upload上傳圖片到阿里云,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08詳解vue.js 開發(fā)環(huán)境搭建最簡單攻略
本篇文章主要介紹了vue.js 開發(fā)環(huán)境搭建最簡單攻略,這里整理了詳細的步驟,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-06-06Vue 利用指令實現(xiàn)禁止反復發(fā)送請求的兩種方法
這篇文章主要介紹了Vue 利用指令實現(xiàn)禁止反復發(fā)送請求的兩種方法,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09一文掌握Pinia使用及數(shù)據(jù)持久化存儲超詳細教程
這篇文章主要介紹了Pinia安裝使用及數(shù)據(jù)持久化存儲的超詳細教程,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07