vue学习之属性绑定

news2025/1/21 1:03:27

内容渲染

  • 采用 :进行属性渲染
  • 创建 demo3.html,内容如下
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1. 导入 vue 脚本文件 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <a :href="link">必应</a>
        <br><br>
        <input type="text" :placeholder="inputValue">
        <br><br>
        <img :src="imgSrc" :style="{width: imgWidth}" alt="">
    </div>

</body>
<script>
    const vm = {
        data: function() {
            return {
                // 超链接地址
                link: "https://cn.bing.com/",
                // 文本框提示内容
                inputValue: '请输入内容...',
                //图片src link
                imgSrc: 'https://i2.3conline.com/images/piclib/201108/25/batch/1/107243/13142814749678n41h8hc7p.jpg',
                //图宽
                imgWidth: '200px',
            }

        }
    }
    const app = Vue.createApp(vm)
    app.mount('#app')
</script>

</html>

效果展示

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/996967.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Kafka/Spark-01消费topic到写出到topic

1 Kafka的工具类 1.1 从kafka消费数据的方法 消费者代码 def getKafkaDStream(ssc : StreamingContext , topic: String , groupId:String ) {consumerConfigs.put(ConsumerConfig.GROUP_ID_CONFIG , groupId)val kafkaDStream: InputDStream[ConsumerRecord[String, Strin…

centos7安装airflow2.7.1

python3安装 版本 Python-3.9.17 ./configure --prefix/usr/local/python3 make && make install随后用ln -s短链接python3和pip3 airflow安装 版本2.7.1 export AIRFLOW_HOME~/airflow编写一个sh文件 AIRFLOW_VERSION2.7.1# Extract the version of Python you…

C 风格文件输入/输出---直接输入/输出---(std::fread)---(std::fwrite)

C 标准库的 C I/O 子集实现 C 风格流输入/输出操作。 <cstdio> 头文件提供通用文件支持并提供有窄和多字节字符输入/输出能力的函数&#xff0c;而 <cwchar>头文件提供有宽字符输入/输出能力的函数。 从直接输入/输出 文件读取 std::fread 从给定输入流 stream …

基于ESP32设计可以通过 WiFi 控制的基于 ESP32 的定制四轴飞行器

介绍 我想选择一个涉及物联网概念的项目,例如无线通信和服务器端脚本编写。我最终决定建造一架四轴飞行器,使用定制的机载飞行控制器进行飞行,该控制器通过 WiFi 从触摸屏平板电脑接收操纵命令。该项目的最终目标是让四轴飞行器从相机图像中跟踪移动物体并跟随它。 硬件 对…

正则表达式:实数

正则表达式&#xff1a;实数 校验字符串&#xff0c;为有效的实数。 可以为&#xff1a;正数或负数&#xff1b; 可以为&#xff1a;整数或小数&#xff1b; 但是&#xff0c;不可以为非数值型的字符串&#xff0c;不可以是一连串的“0” 。 原始正则表达式 ^-?(0|[1-9]\d…

高可用Kuberbetes部署Prometheus + Grafana

概述 阅读官方文档部署部署Prometheus Grafana GitHub - prometheus-operator/kube-prometheus at release-0.10 环境 步骤 下周官方github仓库 git clone https://github.com/prometheus-operator/kube-prometheus.git git checkout release-0.10 进入工作目录 cd kube…

GDB的C++调试方法

本文记录基础的GDB调试过程&#xff0c;包含指令如下&#xff1a; 文章目录 准备编译文件GDB启动GDB开启代码行设置断点运行程序查看pc的指令查看监视的变量以及断点设置快照checkpoint实验1实验2 nextnextistepx/i $pcfinishinfo break 和 delete Numrefbreak col. if condit…

浅谈原型链

一.在掌握原型链之前首先要了解这三点 1.每个函数都有prototype这个属性我们称为原型对象 2.每个对象都有__proto__这个属性 3.对象的__proto__可以访问原型对象上的方法和变量,如果访问不了,就会向上进行查找,直到找不到为止,会出现报错的情况l。 二.例子 1.代码: let arr …

云计算与虚拟化

一、概念 什么是云计算&#xff1f; 云计算&#xff08;cloud computing&#xff09;是分布式计算的一种&#xff0c;指的是通过网络“云”将巨大的数据计算处理程序分解成无数个小程序&#xff0c;然后&#xff0c;通过多部服务器组成的系统进行处理和分析这些小程序得到结果…

基于folium绘制黑河腾冲线,胡焕庸线

背景 黑河腾冲线&#xff0c;又名胡焕庸线&#xff0c;是我们人口密度分布的的近似分界线。今天基于folium&#xff0c;使用python来绘制这条线。 代码 # -*- coding:UTF-8 -*-# region 引入必要依赖 from selfPyTools.mapModule import * # endregion# 准备一个地图类对象,…

学习Bootstrap 5的第十一天

折叠 基础的折叠 在 Bootstrap 5 中&#xff0c;折叠效果可以通过添加特定的属性和类来轻松实现内容的显示和隐藏。具体步骤如下&#xff1a; 1、创建一个可折叠的元素&#xff0c;通常使用 <div> 标签&#xff0c;并为其添加 .collapse 类&#xff0c;以指示它是可折…

智能化时代前端开发使用Amazon CodeWhisperer在vscode中编写代码

目录 一、概述 1.Amazon CodeWhisperer使用您的 AI 编码配套应用程序更快、更安全地构建应用程序。 2.CodeWhisperer 经过数十亿行代码的训练&#xff0c;可以根据您的评论和现有代码实时生成从代码片段到全函数的代码建议。绕过耗时的编码任务&#xff0c;加速使用不熟悉的 …

【自学开发之旅】Flask-数据查询-数据序列化-数据库关系(四)

db.session ProductInfo.query filter() 灵活查询 filter_by() limit() 限制输出条目 offset() 偏移量 order_by() 排序 group_by() 分组聚合 <模型类>.query.<过滤方法> 过滤方法 查询方法 “牛”字开头且&#xff08;“,”默认&#xff09;价格大于5的 &g…

JS判断当前是早上,中午,下午还是晚上

<!DOCTYPE html> <html><head><meta charset"utf-8" /><title></title></head><body><div></div><script>function getTimeState() {// 获取当前时间let timeNow new Date();// 获取当前小时let…

Pytest系列-fixture的详细使用和结合conftest.py的详细使用(3)

介绍 前面一篇讲了setup、teardown可以实现在执行用例前或结束后加入一些操作&#xff0c;但这种都是针对整个脚本全局生效的。 Fixture是pytest的非常核心功能之一&#xff0c;在不改变被装饰函数的前提下对函数进行功能增强&#xff0c;经常用于自定义测试用例前置和后置工作…

【C++】string类模拟实现上篇(附完整源码)

目录 前言1. string的基本结构2. 构造函数、析构函数2.1 构造函数的实现2.1.1带参构造函数 2.2析构函数2.3无参构造函数2.4无参和带参构造函数合并 3. string的遍历3.1 operator[ ]3.2迭代器模拟实现 (简单实现&#xff09;3.3 const迭代器模拟实现 4. 数据的增删查改4.1 reser…

最经典的解析LSA数据库(第六课)

初步认识OSPF的大致内容(第三课)_IHOPEDREAM的博客-CSDN博客 1 OSPF 工作过程 建立领居表 同步数据库 今天来 说一说数据库概念 计算路由表 2 什么是数据库&#xff1f; 数据库是一个组织化的数据集合&#xff0c;用于存储、管理和检索数据。它是一个可访问的集合&#x…

[SICTF 2023 #Round2] Crypto,PWN,Reverse

似乎很久没写了。 周五到周日&#xff0c;两天的这个比赛&#xff0c;有些东西还真是头回用&#xff0c;值得纪录一下。 Crypto 密码这块这届还是比较简单的&#xff0c;没有复杂的题&#xff0c;但量大分多。 【签到】古典大杂烩 给了一堆emoji的图 &#x1f429;&#x…

英国私校的艺术奖学金有哪些?申请要求和申请流程详解!

众所周知&#xff0c;英国私校不仅学术拔尖&#xff0c;在对学生艺术方面的培养也是毫不逊色的。几乎打开每一所英国私校的官网&#xff0c;都可以看到学校罗列的提供的各类课外艺术活动的精彩照片。      每个英国私校除了课后开设的五花八门的兴趣课外&#xff0c;还有各…

【项目 计网12】4.32UDP通信实现 4.33广播 4.34组播 4.35本地套接字通信

文章目录 4.32UDP通信实现udp_client.cudp_server.c 4.33广播bro_server.cbro_client.c 4.34组播multi_server.cmulti_client.c 4.35本地套接字通信ipc_server.cipc_client.c 4.32UDP通信实现 udp_client.c #include <stdio.h> #include <stdlib.h> #include <…