vue指令中v-bind怎么用

這篇文章將為大家詳細講解有關vue指令中v-bind怎么用，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

1、v-bind:可以為元素的屬性綁定一些數據

 <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"

                }

            })

輸出和上面結果相同

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+'這是追加的id'">我是p標簽</p>

輸出結果：

關于“vue指令中v-bind怎么用”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。