v-bind指令

最新推荐文章于 2024-03-22 08:42:31 发布

好事总会发生在下个转弯

最新推荐文章于 2024-03-22 08:42:31 发布

阅读量3.6k

点赞数

分类专栏：指令文章标签： vue

本文链接：https://blog.csdn.net/drawlessonsfrom/article/details/116132520

版权

指令专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、v-bind指令简介

v-bind指令用于响应更新HTML元素的属性，将一个或多个属性或者一个组件的prop动态绑定到表达式。

二、v-bind的使用方式

1、绑定一个属性

<img v-bind:src="imgSrc">

2、使用v-bind的缩写绑定属性

<img :src="imgSrc">

3、使用相关的动态属性名

<img v-bind:[attribute]="imgSrc">

4、内联字符串拼接

<img v-bind:src="'images/' + fileName">

5、直接绑定有属性的对象

<img v-bind="imgObj">
<!---其相关的数据对象如下所示->
imgObj: {
	src: 'image.jpg',
	alt: '图片',
	title: '图片'
}

三、v-bind中的动态参数

1、在v-bind中使用动态参数，可以绑定相关任意元素属性

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue实例</title>
    </head>
    <body>
        <div id="app">
            <a v-bind:[attribute] = "url">动态参数</a>
        </div>
        <script src="../../plugings/vue.js"></script>
        <script>
            var vm = new Vue({
                el: "#app",
                data: {
                    attribute: "href",
                    url: "http://www.baidu.com"
                }
            })
        </script>
    </body>
</html>

2、动态参数使用时应避免使用大写字母，因为浏览器会将元素的属性名强制转化成小写字母

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue实例</title>
    </head>
    <body>
        <div id="app">
            <a v-bind:[Attribute] = "url">动态参数</a>
        </div>
        <script src="../../plugings/vue.js"></script>
        <script>
            var vm = new Vue({
                el: "#app",
                data: {
                    Attribute: "href",
                    url: "http://www.baidu.com"
                }
            })
        </script>
    </body>
</html>

相关的报错信息为：
在这里插入图片描述

3、动态参数中不能含有引号和空格

当含有引号时会进行相关红色报错：
在这里插入图片描述
当含有空格时其在浏览器端的报错情况如下所示：

在这里插入图片描述

好事总会发生在下个转弯

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
v-bind指令

一、v-bind指令简介v-bind指令用于响应更新HTML元素的属性，将一个或多个属性或者一个组件的prop动态绑定到表达式。二、v-bind的使用方式1、绑定一个属性<img v-bind:src="imgSrc">2、使用v-bind的缩写绑定属性<img :src="imgSrc">3、使用相关的动态属性名<img v-bind:[attribute]="imgSrc">4、内联字符串拼接<img v-bind:src="'imag
复制链接

扫一扫