V-bind指令基本用法

短命女 2023-01-10 01:26 122阅读 0赞

## V-bind指令： ##

先看效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjA1NDU0Mw_size_16_color_FFFFFF_t_70_pic_center]

*摘要：*

1.  可以动态的请求获取图片地址URL到data的中转站，然后绑定到src属性显示图片
2.  语法糖简写法

`html核心代码如下：`

<div id="app">
        <div>
            { { message}}
        </div>
        <div>
            <img v-bind:src="imgURL" alt="">
            <a v-bind:href="aHref">百度一下</a>
        </div>
        
        
        <div>
            <img :src="imgURL" alt="">
            <a :href="aHref">百度一下</a>
        </div>
    </div>

`scirpt核心代码如下：`

<script src="../Vue_js/vue.js"></script>
    <script>
        const app = new Vue ({ 
            el: '#app',
            data: { 
                message: 'v-bind语法',
                imgURL: 'https://img12.360buyimg.com/babel/s1180x940_jfs/t1/162561/18/3566/99813/60081445E1bbc336f/bda8a923a78be472.jpg.webp',
                aHref: 'http://www.baidu.com',
            }
        })
    </script>

`css代码如下：`

<style>
            img { 
                width: 200px;
                height: 200px;
            }
        </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjA1NDU0Mw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221119/d891992bba4644f09b790c04db02f786.png

发表评论取消回复

表情：

评论列表（有 0 条评论，122人围观）

还没有评论，来说两句吧...

相关阅读

相关 V-bind指令基本用法

V-bind指令：先看效果图： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR

短命女/ 2023年01月10日 01:26/ 0 赞/ 123 阅读

相关 git基本用法

一、git版本控制 svn、git 1.安装从官网上下载 https://git-scm.com/ 没有特殊要求的话，默认安装即可 2.配置用户信息

Myth丶恋晨/ 2022年12月02日 01:05/ 0 赞/ 218 阅读

相关 angularJS指令以及用法

指令描述 ng-app 定义应用程序的根元素。 ng-bind 绑定 HTML 元素到应用程序数据 ng-bind-html 绑定 HTML 元素的 innerH

柔光的暖阳◎/ 2022年08月20日 03:17/ 0 赞/ 198 阅读

相关 freemarker基本指令用法

freemarker基本指令用法 1、if指令 //第一种用法 [if 条件] ... [/if] //第二种用法 [

待我称王封你为后i/ 2022年03月29日 01:51/ 0 赞/ 564 阅读

相关 canvas基本用法

> canvas是一个强大的绘图及制作动画和游戏手段，下面介绍canvas利用js的API实现基本画图功能。划线： <!DOCTYPE html> <ht

短命女/ 2022年03月18日 03:18/ 0 赞/ 335 阅读

相关 QVector基本用法

QVector基本用法 QVector是Qt对所有数组的封装，比如我们想要一个int类型数组，我们原先会写int array\[10\]，我们在Qt里可以写QVector

叁歲伎倆/ 2022年01月30日 09:31/ 0 赞/ 334 阅读

相关 ajax基本用法

注：[https://www.cnblogs.com/hi-feng/p/7873352.html][https_www.cnblogs.com_hi-feng_p_78733

怼烎@/ 2021年09月28日 19:28/ 0 赞/ 515 阅读

相关 axios基本用法

一.axios 1.什么是axios axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。简单的理解就是ajax的封装它本身具有

╰+哭是因爲堅強的太久メ/ 2021年09月15日 02:54/ 0 赞/ 511 阅读

相关 vue指令用法

vue指令指令式带有 `v-` 前缀的特殊特性`v-text`和`v-html`都属于指令将数据和dom做关联，当表达式的值改变时，响应式地作用在视图解决大胡子语法闪烁

桃扇骨/ 2021年07月25日 02:03/ 0 赞/ 489 阅读

相关 CompletableFuture基本用法

[https://www.cnblogs.com/cjsblog/p/9267163.html][https_www.cnblogs.com_cjsblog_p_9267163

骑猪看日落/ 2021年06月11日 15:13/ 0 赞/ 711 阅读