【老司机带你飞】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
扫码加微信