Vue3 v-bind

v-bind 用于响应更新html元素的属性将一个/多个属性或一个组件的prop动态绑定到样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<!--    绑定一个属性-->
    <img v-bind:src="imgSrc">
<!--    简写语法-->
    <img :src="imgSrc">
<!--    动态属性名-->
    <a v-bind:[attrname]="url">链接</a>
<!--    内联字符串拼接-->
    <img :src="'images/' + filename">
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
    const vm  = Vue.createApp({
        data(){
            return {
               attrname:'href',
                url:'http://www.sina.com/cn',
                imgSrc:'https://img2.baidu.com/it/u=2027263701,3348197028&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=750',
                filename:'拉拉'
            }
        }
    }).mount("#app");
</script>
</body>
</html>

Vue3 v-bind

评论

相关文章