Vue知识整理，让你快速入门Vue.js：03_8.本地应用：v-bind指令（为元素绑定属性）

被开发耽误的大厨

已于 2022-06-06 00:00:27 修改

阅读量438

点赞数

分类专栏： web前端（H5）文章标签： vue.js javascript 前端

于 2020-03-22 16:34:02 首次发布

本文为博主原创文章，不得随意转载，转载请注明出处！！！

本文链接：https://blog.csdn.net/YuDBL/article/details/105030229

版权

web前端（H5）专栏收录该内容

83 篇文章 15 订阅

订阅专栏

一、v-bind 语法介绍

1、 img标签的固定写死的写法

2、使用 v-bind 定义img标签 src、title、class 属性

3、v-bind的简写写法

二、代码验证测试

1、v-bind指令之img_src_title

（1）实例代码

（2）效果展示

2、v-bind指令之img_class属性

（1）实例代码

（2）效果展示

三、内容-总结

上一节我们学习了 v-if 指令，通过操作 dom 元素的方式，来切换元素的显示状态。

那如果说我只是想操作元素的某个属性呢？咱们这一节就专门来学习操作属性的 v-bind 指令。

一、v-bind 语法介绍

在具体演示语法以前，我们首先要明确一下什么是属性，我们来回忆一下有哪些常见的属性，比如：src、title、class

他们有一个共同点：就是都写在元素的内部。下面我们来看看它的语法：

我们以 img 标签为例

1、 img标签的固定写死的写法

2、使用 v-bind 定义img标签 src、title、class 属性

其中 img 标签定义class属性，我们演示了两种写法：

三元表达式写法

如果 isActive 它的值为true，那么返回的就是active这个类名，负责就返回一个空字符串。

对象的写法（推荐）

active这个类名是否生效取决于isActive的值，isActive为true就生效，为false就移除。

3、v-bind的简写写法

直接把 v-bind 去掉即可，如下图：

二、代码验证测试

1、v-bind指令之img_src_title

（1）实例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>11_v-bind指令之img_src_title</title>
</head>

<body>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <div id= "app">
        <!-- 1、img标签 的固定写死的写法 -->
        <img src= "./img/csdn.png"/><br>

        <!-- 2、v-bind 固定写死的写法 -->
        <!-- 这样写是不显示的，报异常 -->
        <!-- <img v-bind:src= "./img/csdn.png"/> -->
        <!-- 路径加单引号，这样写是可以显示的 -->
        <img v-bind:src="'./img/csdn.png'" /><br>

        <!-- 3、v-bind指令的写法 -->
        <img v-bind:src="imgSrc" v-bind:title="imgTitle+'!!!'"/><br>
        <!-- 4、v-bind指令的简写写法 -->
        <img :src="imgSrc" :title="imgTitle+'_简写!!!'" /><br>

    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                imgSrc: "./img/csdn.png",
                imgTitle: "csdn-logo",
            },
        })
    </script>

</body>

</html>

（2）效果展示

当把鼠标指针停留在图片上面，img标签title属性上面的文字，就会显示出来，如下图

其他的都有代码注释，就不多说了。

2、v-bind指令之img_class属性

（1）实例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>12_v-bind指令之img_class属性</title>

    <!-- 定义css内部样式表：在 HTML5 中, type 属性不再是必须的。默认值为 "text/css" -->
    <style>
        .active{
            /* soild单词千万别写错，否则无效果*/
            /* border: 1px soild red; */
            border: 1px solid red;
        }
    </style>
</head>

<body>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <div id="app">
    
        <!-- class类选择器_三元表达式写法 -->
        <img :src="imgSrc" 
        :title="imgTitle+'_简写!!!'" 
        :class="isActive?'active':''" 
        @click="toggleActive" /><br>
        
        <!-- class类选择器_对象的写法（推荐） -->
        <img :src="imgSrc" 
        :title="imgTitle+'_简写!!!'" 
        :class="{active:isActive}" 
        @click="toggleActive" /><br>
    
    </div>


    <script>
        var app = new Vue({
            el: "#app",
            data: {
                imgSrc: "./img/csdn.png",
                imgTitle: "csdn-logo",
                isActive: false
            },
            methods: {
                toggleActive:function(){
                    console.log("toggleActive方法被执行！");
                    console.log(this.isActive + "");

                    // 给isActive去反值
                    this.isActive = !this.isActive;

                }
            },
        })
    </script>

</body>

</html>

（2）效果展示

点击图片，即添加一个红色边框样式。

有关三元表达式的写法、对象的写法，上面语法介绍已经讲到，这里就不多少了。

另外写代码的时候需要谨慎，注意别把 solid 写成 soild 了，那样会无效果

检查元素的时候会报提示：Invalid property value 属性值无效

三、内容-总结

被开发耽误的大厨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue知识整理，让你快速入门Vue.js：03_8.本地应用：v-bind指令（为元素绑定属性）

目录一、v-bind 语法介绍1、 img标签的固定写死的写法2、使用 v-bind 定义img标签 src、title、class 属性3、v-bind的简写写法二、代码验证测试1、v-bind指令之img_src_title（1）实例代码（2）效果展示2、v-bind指令之img_class属性（1）实例代码（2）效果展示三、内容-总结上一......
复制链接

扫一扫