Vue · 2022年7月5日 0

v-bind指令

v-bind指令用于为元素绑定指令。完整写法为:v-bind:属性名,简写方法仅保留:属性名

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-if</title>
</head>
<body>
        <!-- 导入vue包 -->
        <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

        <div id="app">
            <!-- 完整写法 -->
            <img v-bind:src="imgSrc" alt="">
            <!-- 简写 -->
            <img :src="imgSrc" alt="" :title="imgTitle">
        <script>
            var app=new Vue({
                el:"#app",
                data:{
                    imgSrc:"https://www.xxsirs.top/xxsirs.jpg",
                    imgTitle:"博客logo"
                },
            })
        </script>
</body>
</html>