<vue 基础知识 3、v-bind使用>
代码结构
一、 v-bind基本使用
1、效果
2、代码
01-v-bind基本使用.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-v-bind基本使用</title>
</head>
<body> <div id="app">
<div>
<img v-bind:src="imgSrc" >
</div>
<div>
<a v-bind:href="link">百度</a>
</div>
-------------如下是简写-----------
<!--简写-->
<div>
<img :src="imgSrc" >
</div> <div>
<a :href="link">百度</a>
</div>
</div> <script src="vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
imgSrc: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
link: 'https://www.baidu.com'
}
})
</script> </body>
</html>
二、 绑定class属性
1、 效果
2、代码
02-绑定class属性.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02-绑定class属性</title>
<style>
.active {
color: red;
}
</style>
</head>
<body> <div id="app">
<h2 :class="{'active': isActive}">hello world!</h2>
</div> <script src="vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
isActive: true
}
})
</script> </body>
</html>
三、绑定class属性(综合练习)
1、效果
点击哪一行，哪一行变成红色
1、 代码
03-绑定class属性(综合练习).html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03-绑定class属性(综合练习)</title>
<style>
.active {
color: red;
}
</style>
</head>
<body> <div id="app">
<ul>
<li v-for="(item, index) in movies"
:class="{active: index===currentIndex}"
@click="itemClick(index)">
{{index}} {{item}}
</li>
</ul>
</div> <script src="vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
movies: ['三国演义', '红楼梦', '西游记', '水浒传'],
currentIndex: 0
},
methods: {
itemClick(index) {
this.currentIndex = index
}
}
})
</script> </body>
</html>
四、绑定class属性(扩展)
1、 效果
绑定多个class
2代码
04-绑定class属性(扩展).html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04-绑定class属性(扩展)</title>
<style>
.line {
text-decoration: underline;
} .active {
color: red;
} .large {
font-size: 40px;
}
</style>
</head>
<body> <div id="app">
<h2 :class="{line: isLine, active: isActive}">hello world</h2>
<h2 class="large" :class="{line: isLine, active: isActive}">hello world</h2>
<h2 class="large" :class="['active', 'line']">hello world</h2> </div> <script src="vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
isLine: true,
isActive: true
}
})
</script> </body>
</html>
五、绑定style属性(对象)
1、效果
绑定单个或者多个style属性
2、代码
05-绑定style属性(对象).html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05-绑定style属性(对象)</title>
</head>
<body> <div id="app">
<h2 :style="{color: dColor, fontSize: dFontSize + 'px'}">hello world</h2>
<h2 :style="objStyle">hello world</h2>
<h2 :style="[objStyle1, objStyle2]">hello world</h2>
</div> <script src="vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
dColor: 'red',
dFontSize: 50,
objStyle: {
color: 'red',
fontSize: '60px'
},
objStyle1: {
fontSize: '80px',
color: 'green'
},
objStyle2: {
textDecoration: 'underline'
}
}
})
</script> </body>
</html>
<vue 基础知识 3、v-bind使用>的更多相关文章
- 简单物联网：外网访问内网路由器下树莓派Flask服务器
最近做一个小东西,大概过程就是想在教室,宿舍控制实验室的一些设备. 已经在树莓上搭了一个轻量的flask服务器,在实验室的路由器下,任何设备都是可以访问的:但是有一些限制条件,比如我想在宿舍控制我种花 ...
- 利用ssh反向代理以及autossh实现从外网连接内网服务器
前言 最近遇到这样一个问题,我在实验室架设了一台服务器,给师弟或者小伙伴练习Linux用,然后平时在实验室这边直接连接是没有问题的,都是内网嘛.但是回到宿舍问题出来了,使用校园网的童鞋还是能连接上,使 ...
- 外网访问内网Docker容器
外网访问内网Docker容器 本地安装了Docker容器,只能在局域网内访问,怎样从外网也能访问本地Docker容器? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Docker容器 ...
- 外网访问内网SpringBoot
外网访问内网SpringBoot 本地安装了SpringBoot,只能在局域网内访问,怎样从外网也能访问本地SpringBoot? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装Java 1 ...
- 外网访问内网Elasticsearch WEB
外网访问内网Elasticsearch WEB 本地安装了Elasticsearch,只能在局域网内访问其WEB,怎样从外网也能访问本地Elasticsearch? 本文将介绍具体的实现步骤. 1. ...
- 怎样从外网访问内网Rails
外网访问内网Rails 本地安装了Rails,只能在局域网内访问,怎样从外网也能访问本地Rails? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Rails 默认安装的Rails端口 ...
- 怎样从外网访问内网Memcached数据库
外网访问内网Memcached数据库 本地安装了Memcached数据库,只能在局域网内访问,怎样从外网也能访问本地Memcached数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装 ...
- 怎样从外网访问内网CouchDB数据库
外网访问内网CouchDB数据库 本地安装了CouchDB数据库,只能在局域网内访问,怎样从外网也能访问本地CouchDB数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Cou ...
- 怎样从外网访问内网DB2数据库
外网访问内网DB2数据库 本地安装了DB2数据库,只能在局域网内访问,怎样从外网也能访问本地DB2数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动DB2数据库 默认安装的DB2 ...
- 怎样从外网访问内网OpenLDAP数据库
外网访问内网OpenLDAP数据库 本地安装了OpenLDAP数据库,只能在局域网内访问,怎样从外网也能访问本地OpenLDAP数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动 ...
随机推荐
- 文心一言 VS 讯飞星火 VS chatgpt （148）-- 算法导论12.2 3题
三.用go语言,写出过程 TREE-PREDECESSOR 的伪代码. 文心一言: 以下是使用Go语言编写的TREE-PREDECESSOR函数的伪代码: func TREE-PREDECESSOR( ...
- Nim 枚举类型 对性能的影响
Nim 枚举类型 对性能的影响 继上一篇文章<Nim 概念 Concept 对性能的影响>后,我在想,既然 method 虚方法造成性能的影响很大,那么有没有更快的方法实现,当然是有的,那 ...
- [c/c++][考研复习笔记]内部排序篇学习笔记
考研排序复习笔记 插入排序 #include<stdio.h> #include<stdlib.h> #define MaxSize 9 //折半插入排序 void ZBIns ...
- 将多个txt文件中的内容写在一个txt中的方法
import os filename='./train_data/img_' for i in range(1,19736): newfile=filename+str(i)+'.txt' if os ...
- 聊聊流式数据湖Paimon(三)
概述 如果表没有定义主键,则默认情况下它是仅追加 表类型(Append Only Table). 根据桶(Bucket)的定义,我们有两种不同的仅追加模式:"Append For Scala ...
- X410的白嫖方案
微软商店下的x410要收费试用也就几天,记录白嫖方案.配置和使用跳转到上一篇文章:Windows下使用图形化的Havoc C2 编译运行 GitHub上start最多的是这个仓库,但是已经很久没有维护 ...
- Mybatis 源码6 结果集映射流程 ，mybatis插件实现原理和基于mybatis插件实现参数化类型TypeHandler
一丶前情回顾 书接上回,下面是SimpleExecutor执行查询的主要逻辑 prepareStatement 实现获取数据库连接, 其中连接是从Transaction.getConnection方法 ...
- 文心一言 VS 讯飞星火 VS chatgpt （38）-- 算法导论5.4 2题
二.假设我们将球投入到b个箱子里,直到某个箱子中有两个球.每一次投掷都是独立的并且每个球落入任何箱子的机会均等.请问投球次数期望是多少? 文心一言: 这是一个典型的鸽巢原理(Pigeonhole Pr ...
- GDAL创建JPG或PNG格式图像
目录 1. 概述 2. 实现 1. 概述 根据GDAL文档,JPG/PNG格式支持读取和批量写入,但不支持实时更新.也就是不支持Create()方法,但是支持CreateCopy()方法.也可能是由于 ...
- 记一次 MySQL timestamp 精度问题的排查 → 过程有点曲折
开心一刻 下午正准备出门,跟正刷着手机的老妈打个招呼 我:妈,今晚我跟朋友在外面吃,就不在家吃了 老妈拿着手机跟我说道:你看这叫朋友骗缅北去了,tm血都抽干了,多危险 我:那是他不行,你看要是吴京去了 ...