• Vue学习之路第五篇:v-bind


    v-bind:是Vue提供的用于绑定html属性的指令。

    html中常见的属性有:id、class、src、title、style等,他们都是以 名称/值对 的形式出现,如:id="first"

    本篇的内容主要是介绍使用v-bind指令动态给这些属性赋值。

    话不多说,上代码:

    <body>
        <div id="app">
            <img v-bind:src="path" style=" 200px;height: 200px"/>
        </div>
    
        <script type="text/javascript">
            var vm = new Vue({
                el : "#app",
                data : {
                    path : "img/clock.png"
                }
            });
        </script>
    </body>

    代码很简单,主要分为两个模块:前端定义了一个Img标签,它的src属性值通过v-bind指令从Vue对象中获取;js代码定义了Vue对象,并声明了data数据。

    注意:在src前面我们添加了 “v-bind:” 千万不要忘了v-bind后面的冒号,规则就是这么定的。

    运行结果:

    接下来我要向大家介绍v-bind的一种简写形式,那就是我们在实际传递属性值数据的时候可以不写“v-bind”只留属性名称前面的冒号即可。

    <body>
        <div id="app">
            <img :src="path" style=" 200px;height: 200px"/>
        </div>
    
        <script type="text/javascript">
            var vm = new Vue({
                el : "#app",
                data : {
                    path : "img/clock.png"
                }
            });
        </script>
    </body>

    这里省略了“v-bind”,只在src属性名前保留了冒号,看下运行结果:

    结果一样,大家有兴趣可以动手尝试一下html的其他属性,毕竟实践是最好的老师,写程序要勤动手。

    下面我还要占用大家一点时间,讲解一个小知识点,先单独提取出一行代码进行剖析:

    <img v-bind:src="path" style=" 200px;height: 200px"/>

    这里我们对属性src做了绑定传值,有时候我们会有这样的需求:图片的路径不是固定的,可能有很多目录,我们需要动态获取路径。假设Vue已经帮我们获取了图片服务器的路径,但是具体的目录路径需要我们前端经过处理获取,再拼接上去。这时我们看以把"path"看做是一个表达式,通过“path + '/pic/a.png' ”的方法动态加载。

    <body>
        <div id="app">
            <img v-bind:src="path + 'clock.png'" style=" 200px;height: 200px"/>
        </div>
    
        <script type="text/javascript">
            var vm = new Vue({
                el : "#app",
                data : {
                    path : "img/"
                }
            });
        </script>
    </body>

    运行结果:

    每天进步一点点!

  • 相关阅读:
    This is a thoughtful essay
    MSSQL 模糊搜索全文(过程、函数、触发器等)
    MSSQL 高并发下生成连续不重复的订单号
    MSSQL sql numeric转字符串显示不补0
    iOS 开发之UIStackView的应用
    Java day 5
    Java day 4
    Java day 3-1
    Java day 3
    Java day 2
  • 原文地址:https://www.cnblogs.com/shibin90/p/10314517.html
Copyright © 2020-2023  润新知