vue指令?v-bind的使用和注意需要注意的點
更新時間：2021年11月22日 10:32:00 作者：huxiaoxiao
這篇文章主要給大家分享了?v-bind的使用和注意需要注意的點，下面文章圍繞?v-bind指令的相關(guān)資料展開內(nèi)容且附上詳細(xì)代碼?需要的小伙伴可以參考一下，希望對大家有所幫助
1、v-bind:可以為元素的屬性綁定一些數(shù)據(jù)
<div id="app">
<p v-bind:title="message" v-bind:id="pId">我是p標(biāo)簽</p>
</div>
<script src="./js/vue.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
message:"我是p標(biāo)簽的title值",
pId:"這是隨便給的id"
}
})
輸出為：
2、v-bind:可以簡寫成 ： 推薦直接寫冒號
<div id="app">
<p :title="message" :id="pId">我是p標(biāo)簽</p>
</div>
<script src="./js/vue.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
message:"我是p標(biāo)簽的title值",
pId:"這是隨便給的id"
}
})
輸出和上面結(jié)果相同
3、v-bind：指令表達(dá)式的拼接，
如果想要實現(xiàn)表達(dá)式的拼接，被拼接的字符串一定要被引號包裹起來，否則會被當(dāng)做變量解析
不加引號：
報錯：[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標(biāo)簽</p>
輸出結(jié)果：
到此這篇關(guān)于 v-bind的使用和注意需要注意的點的文章就介紹到這了,更多相關(guān) v-bind的使用和注意點內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
antd配置config-overrides.js文件的操作
這篇文章主要介紹了antd配置config-overrides.js文件的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
詳解基于Vue cli開發(fā)修改外部組件Vant默認(rèn)樣式
這篇文章主要介紹了詳解基于Vue cli開發(fā)修改外部組件Vant默認(rèn)樣式,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
這篇文章主要為大家介紹了Vue之監(jiān)聽數(shù)據(jù)的原理，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助<BR>2021-11-11
本篇文章主要介紹了vuejs實現(xiàn)遞歸樹型菜單組件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
vue3項目如何使用樣式穿透修改elementUI默認(rèn)樣式
這篇文章主要介紹了vue3項目使用樣式穿透修改elementUI默認(rèn)樣式,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
在項目中使用自定義字體可以提升頁面的視覺效果,并確保在不同設(shè)備上的一致性,文中通過代碼示例給出了具體的操作步驟,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-06-06
這篇文章主要介紹了淺談vue加載優(yōu)化策略，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
詳解vue-cli + webpack 多頁面實例配置優(yōu)化方法
本篇文章主要介紹了詳解vue-cli + webpack 多頁面實例配置優(yōu)化方法，具有一定的參考價值，有興趣的可以了解一下2017-07-07
Vue中使用Element的Table組件實現(xiàn)嵌套表格
本文主要介紹了Vue中使用Element的Table組件實現(xiàn)嵌套表格,通過type="expand"設(shè)置了一個展開按鈕,點擊該按鈕會顯示與當(dāng)前行關(guān)聯(lián)的子表格內(nèi)容,感興趣的可以了解一下2024-01-01
這篇文章主要介紹了vue如何實現(xiàn)簡易的彈出框，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04