【老司機帶你飛】vue.js基礎入門教程（八）

v-bind指令

給元素綁定屬性，語法：v-bind:id=”idName”,也可以自定義綁定自定義屬性：v-bind：data=“dataName”

<div id="app">
    <div>
        <button v-bind:id="attrbuteId" v-bind:data-index="index" v-on:click="getAttr">屬性綁定</button>
    </div>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            attrbuteId: "10", //綁定id屬性的值
            index:"1", //綁定自定義屬性index的值
        },
        methods:{
            getAttr:function (event) {
                console.log("button的id值爲："+event.target.id);
                console.log("button的自定義屬性index值爲："+event.target.dataset.index);
            }
        }
    })
</script>

注：自定義屬性，是指不是元素自帶的屬性，如果需要在方法中獲取到自定義屬性的值，綁定時需要使用v-bind:data-屬性名，獲取時使用event.target.dataset.屬性名。

QQ：732005030
掃碼加微信