三、動態繫結屬性

不會Java怎麼找女朋友發表於2021-01-03

01-v-bind的基本使用

1.1v-bind

1、除了內容需要動態來決定外，某些屬性我們也希望動態來繫結

  • 比如動態繫結a元素的href屬性
  • 比如動態繫結img元素的src屬性

2、這個時候，我們可以使用v-bind指令：

  • 作用：動態繫結屬性
  • 縮寫：語法糖 ：（簡寫）
  • 預期：any(with argument) | Object（without argument）
  • 引數：attrOrProp（optional）

1.2程式碼實戰

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>01-v-bind的基本使用</title>
</head>
<body>

<div id="app">
  <!--錯誤的用法,這裡不可以用mustache語法-->
  <!--<img src="{{imgURL}}}" alt="">-->
  <!--正確用法-->
  <img v-bind:src="imgURL" alt="">
  <!--  語法糖，動態繫結簡寫-->
  <img :src="imgURL" alt="">
  <a :href="baiduURL">百度一下</a>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<!--如果沒有安裝vue.js，就用下面的程式碼-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
  const vm = new Vue({
    el: '#app',
    data: {
      imgURL: 'https://huyaimg.msstatic.com/cdnimage/gamebanner/phpaicNpn1595239718.jpg',
      baiduURL: 'http://www.baidu.com'
    }
  })
</script>
</body>
</html>

1.3執行結果

在這裡插入圖片描述

02-v-bind動態繫結class(物件語法)

2.1v-bind繫結class

1、繫結方式：物件語法

  • 物件語法的含義是：class後面跟的是一個物件

2、用法

  • 通過判斷，顯示或隱藏傳入的類
  • 普通的類同時存在，並不會覆蓋，而是合併
  • 如果過於複雜，可以放在一個methods或者computed中

2.2程式碼實戰

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>02-v-bind動態繫結class(物件語法)</title>
  <style>
    .active{
      color: red;
    }
    .family{
      font-family: 新宋體;
    }
    .size{
      font-size: 30px;
    }
  </style>
</head>
<body>

<div id="app">
  <!--:class的值可以放一個物件-->
  <!--<h2 :class="{類名1: boolean,類名2: boolean}">{{message}}</h2>-->
  <h2 class="size" :class="getClasses()">{{message}}</h2>
  <button v-on:click="btnClickActive">切換顏色</button>
  <button v-on:click="btnClickFamily">切換字型</button>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<!--如果沒有安裝vue.js，就用下面的程式碼-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
  const vm = new Vue({
    el: '#app',
    data: {
      message: 'hello world!',
      isActive: true,
      isFamily: true
    },
    methods:{
      btnClickActive:function () {
        this.isActive = !this.isActive;
      },
      btnClickFamily:function () {
        this.isFamily = !this.isFamily;
      },
      getClasses:function () {
        return {active: this.isActive,family: this.isFamily};
      }
    }
  })
</script>
</body>
</html>

2.3執行結果

在這裡插入圖片描述

03-點選列表更改字型顏色

3.1案例需求

  • 問題：點選列表中的哪一項，那麼該項的文字就變成紅色
  • 說明：Vue中v-for,v-bind（：）,v-on（@）的綜合使用

3.2程式碼實戰

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>03-點選列表更改字型顏色</title>
  <style>
    .active{
      color: red;
    }
  </style>
</head>
<body>

<div id="app">
  <ul>
    <li v-for="(movie,index) in movies" :class="{active:isActive === index}" v-on:click="liClick(index)">{{movie}}</li>
  </ul>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<!--如果沒有安裝vue.js，就用下面的程式碼-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
  const vm = new Vue({
    el: '#app',
    data: {
      movies: ['蜘蛛俠','鋼鐵俠','綠巨人','蝙蝠俠'],
      isActive:-1
    },
    methods: {
      liClick:function (index) {
        this.isActive = index;
      }
    }
  })
</script>
</body>
</html>

3.3執行結果

在這裡插入圖片描述

04-v-bind動態繫結style

4.1程式碼實戰

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>04-v-bind動態繫結style</title>
</head>
<body>

<div id="app">
  <h2 :style="getStyles()">{{message}}</h2>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<!--如果沒有安裝vue.js，就用下面的程式碼-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script type="text/javascript">
  const vm = new Vue({
    el: '#app',
    data: {
      message: 'hello world!',
      finalSize:100,
      finalColor:"red",
      finalBackgroundColor:"pink"
    },
    methods:{
      getStyles(){
        return {fontSize:this.finalSize+'px',color:this.finalColor,background:this.finalBackgroundColor}
      }
    }
  })
</script>
</body>
</html>

4.2執行結果

在這裡插入圖片描述

相關文章