vue指令 v-bind的使用和註意需要註意的點

Posted on by

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>

輸出結果：

到此這篇關於 v-bind的使用和註意需要註意的點的文章就介紹到這瞭,更多相關 v-bind的使用和註意點內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：