<vue 基础知识 3、v-bind使用>

代码结构

 

 

一、     v-bind基本使用

1、效果  

 

 

2、代码

01-v-bind基本使用.html

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!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！
posted @   万笑佛  阅读(330)  评论(0)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！
点击右上角即可分享
微信分享提示