<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！
posted @ 2021-11-15 18:39  万笑佛  阅读(340)  评论(0)    收藏  举报