<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 安装并启动 ...
随机推荐
- viewPager2页面的切换
使用流程: 1.定义ViewPager 2.为ViewPager创建Adapter ViewPagerAdapter package com.example.viewpagerandfragm ...
- 单元测试框架pytest
1.什么是pytest pytest是一个非常成熟的全功能的Python测试框架,主要有以下特点: 简单灵活,容易上手,文档丰富 支持参数化,可以细粒度地控制要测试的测试用例 能够支持简单的单元测试和 ...
- flask蓝图（这玩意就是django的子应用）
蓝图的概念类似django的子应用,作用就是分模块开发,有关联的都放在一起. 蓝图的创建步骤: 新建一个包(一个包就是一个模块.等同于一个子应用) 在包的__init__.py中创建蓝图对象 . 蓝图 ...
- 安装服务器提示A debugger has been found running in your system. Please, unload it from memory and restart
解决方法:运行msconfig,取消调试模式,重启电脑再安装
- 使用gradle的方式进行Springboot3的web开发(微服务版)
简要: 最近看了很多的Springboot3的项目,但是发现很多都是用maven来进行版本管理的,很少有用gradle来管理的,通过网上查找资料,看视频,终于自己写一个gradle管理的Springb ...
- 如何清理Docker不用的Volume
有一句老话叫:书到用时方恨少. 其实电脑的内存空间也是非常宝贵,特别是MacOS下的docker可以分配的空间更是寸土寸金. 在21年的时候我也遇到过类似的问题,当时的经历记录在这篇博客:https: ...
- Spring表达式语言（SPEL）学习（03）
rootObject 在表达式中直接写name和getName(),这时候Expression是无法解析的,因为其不知道name和getName()对应什么意思 @Test public void t ...
- 2023-09-20：用go语言，保证一定是n*n的正方形，实现从里到外转圈打印的功能 如果n是奇数，中心点唯一，比如 a b c d e f g h i e是中心点，依次打印 : e f i h g
2023-09-20:用go语言,保证一定是n*n的正方形,实现从里到外转圈打印的功能 如果n是奇数,中心点唯一,比如 a b c d e f g h i e是中心点,依次打印 : e f i h g ...
- MySQL篇：第五章_详解DDL语言
DDL语句 库和表的管理 库的管理: 一.创建库 create database 库名 二.删除库 drop database 库名 表的管理: 1.创建表 CREATE TABLE IF NOT E ...
- 掌握ROMA Compose，报表清单不秃头
摘要:在没有ROMA Compose之前,完成一个跨数据源的关联查询是一个十分艰巨的任务. 1. ROMA Compose为何诞生 试想这样一个场景,主管让刚入职的小沛明天下班前给他发一份报表.小沛兴 ...