VUE3(三)v-bind和v-on

v-bind

基本使用:在属性前加上v-bind:来动态绑定

    <template id="my-app">
        <!-- v-bind的基本使用 -->
        <img v-bind:src="imgUrl" alt="">
        <a v-bind:href="link">百度一下</a>
    </template>
    <script>
        const app={
            template:"#my-app",
            data(){
                return{
                    imgUrl: "https://avatars.githubusercontent.com/u/42291026?v=4",
                    link: "https://www.baidu.com"
                }
            }
        };

使用语法糖简写:

    <template id="my-app">
        <!-- 1.v-bind的基本使用 -->
        <img v-bind:src="imgUrl" alt="">
        <a v-bind:href="link">百度一下</a>
        <!-- 2.v-bind的语法糖 : -->
        <a :href="link">百度一下</a>
    </template>

发表评论