vue学习之属性绑定

内容渲染

  • 采用 :进行属性渲染
  • 创建 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 linkimgSrc: '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.hqwc.cn/news/108446.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LeetCode 1359. Count All Valid Pickup and Delivery Options【动态规划,组合数学】1722

本文属于「征服LeetCode」系列文章之一&#xff0c;这一系列正式开始于2021/08/12。由于LeetCode上部分题目有锁&#xff0c;本系列将至少持续到刷完所有无锁题之日为止&#xff1b;由于LeetCode还在不断地创建新题&#xff0c;本系列的终止日期可能是永远。在这一系列刷题文章…

BGP路由属性

任何一条BGP路由都拥有多个路径属性&#xff08;Path Attributes&#xff09;&#xff0c;当路由器通告BGP路由给它的对等体时&#xff0c;该路由将会携带多个路径属性&#xff0c;这些属性描述了BGP路由的各项特征&#xff0c;同时在某些场景下也会影响BGP路由优选的决策。 一…

百度收录和权重怎么提升-网站如何获得百度权重

你是否一直苦恼于网站权重的低迷&#xff1f;不知道如何开始提升网站权重&#xff0c;缺乏优质内容更新网站。不清楚如何进行关键词优化来提升网站排名和权重。SEO是一个需要持续投入时间和资源的过程。每个网站的情况都会有所不同&#xff0c;因此所花费的时间也会有所差异。然…

Spring基础(2w字---学习总结版)

目录 一、Spirng概括 1、什么是Spring 2、什么是容器 3、什么是IoC 4、模拟实现IoC 4.1、传统的对象创建开发 5、理解IoC容器 6、DI概括 二、创建Spring项目 1、创建spring项目 2、Bean对象 2.1、创建Bean对象 2.2、存储Bean对象&#xff08;将Bean对象注册到容器…

Apollo介绍和入门

文章目录 Apollo介绍配置中心介绍apollo介绍主流配置中心功能特性对比 Apollo简介 入门简单的执行流程Apollo具体的执行流程Apollo对象执行流程分步执行流程 核心概念应用&#xff0c;环境&#xff0c;集群&#xff0c;命名空间企业部署方案灰度发布全量发布 配置发布的原理发送…

HCIE-HCS规划设计搭建

1、相关术语 1、等价路由 等价路由&#xff08;Equal-cost routing&#xff09;是一种网络路由策略&#xff0c;用于在网络中选择多个具有相同路由度量&#xff08;路由距离或成本&#xff09;的最佳路径之一来转发数据流量。 当存在多个路径具有相同的路由度量时&#xff0c;…

“系统的UI”——SystemUI

SystemUI的实现 以StatusBar为例&#xff0c;来分析下Android系统具体是如何实现它们的。 相关代码分为两部分&#xff0c;即&#xff1a; Service部分 代码路径&#xff1a;frameworks/base/services/java/com/android/server。 应用部分 代码路径&#xff1a;frameworks…

聚合物发光材料荧光量子效率测量

近年来‚聚合物发光材料与器件受到人们的极大关注和高度重视‚其关键是聚合物发光器件具有光吸收范围宽‚吸收强度大‚发光效率高‚激发阈值低以及制备工艺简便灵活等显著特点‚已成为有机固体激光领域一个新的研究热点。 现有的聚合物发光材料体系主要集中在&#xff1a;聚噻…

【环境配置】基于Docker配置Chisel-Bootcamp环境

文章目录 Chisel是什么Chisel-Bootcamp是什么基于Docker配置Chisel-Bootcamp官网下载Docker安装包Docker换源启动Bootcamp镜像常用docker命令 可能产生的问题 Chisel是什么 Chisel是Scala语言的一个库&#xff0c;可以由Scala语言通过import引入。 Chisel编程可以生成Verilog代…

mysql文档--innodb中的重头戏--事务隔离级别!!!!--举例学习--现象演示

阿丹&#xff1a; 先要说明一点就是在网上现在查找的mysql中的事务隔离级别其实都是在innodb中的事务隔离级别。因为在mysql的5.5.5版本后myisam被innodb打败&#xff0c;从此innodb成为了mysql中的默认存储引擎。所以在网上查找的事务隔离级别基本上都是innodb的。并且支持事务…

数据结构 > 算法的时间复杂度(1)

目录 1.算法效率 1.1如何衡量一个算法的好坏 1.2算法的复杂度 1.3复杂度在校招中的考察 2.时间复杂度 2.1时间复杂度的概念 2.2大O的渐进表示法 2.3特殊情况 1.算法效率 1.1如何衡量一个算法的好坏 如何衡量一个算法的好坏呢&#xff1f;比如对于以下斐波那契数列&…

qiankun 子应用 ant-design-vue快速填坑指南

qiankun 子应用使用 ant-design-vue v3 问题 Cascader无法显示下拉Form label 显示混乱Message 提示报错等各种样式不兼容问题… 解决办法 子应用 ant-design-vue v3 升v4 官网文档子应用 ant-design-vue ConfigProvider prefixCls全局化修改 设置统一样式前缀&#xff0c;…