<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>
资源丰富的的网盘资源：网盘资源大全！ 推荐一个适合零基础学习SQL的网站：不用安装数据库，在线轻松学习SQL！
