目錄

• 1、v-bind:可以為元素的屬性繫結一些資料
• 2、v-bind:可以簡寫成 ： 推薦直接寫冒號
• 3、v-bind：指令表示式的拼接，

1、v-bind:可以為元素的屬性繫結一些資料

 <div id="app">

    <p v-bind:title="message" v-bind:id="pId">客棧;我是p標籤</p>

 </div>

<script src=".//.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="pIhttp://www.cppcns.comd">我是p標籤</p>

 </div>

<script src="./js/vue.js"></script>

          <script>

            let vm = new Vue({

                el:"#app",pId:"這是隨便給的id"

                }

            })

輸出和上面結果相同

3、v-bind：指令表示式的拼接，

如果想要實現表示式的拼接，被拼接的字串一定要被引號包裹起來，否則會被當做變數解析

不加引號：

報錯：[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+'這是追加的http://www.cppcns.comid'">我是p標籤</p>

輸出結果：

到此這篇關於 v-bind的使用和注意需要注意的點的文章就介紹到這了,更多相關 v-bind的使用和注意點內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！