03-动态绑定属性

多次拒绝易烊千玺/dog.jpg

于 2021-06-30 13:48:51 发布

阅读量50

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_53174744/article/details/118358528

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、v-bind的基本使用.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <!-- 错误的做法： 这里不可以使用mustache语法 -->
  <!-- <img src="{{imgURL}}" alt=""> -->
  <!-- 正确的做法：使用v-bind指令 -->
  <img v-bind:src="imgURL" alt="">
  <a v-bind:href="aHref">百度一下</a>
  <h2>{{imgURL}}</h2>
  
  <!-- 语法糖的写法 -->
  <img :src="imgURL" alt="">
  <a :href="aHref">百度一下</a>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app', //用于挂载要管理的元素
    data: { //定义数据
      imgURL: 'https://img30.360buyimg.com/pop/s590x470_jfs/t1/189548/22/10061/95353/60d53b1cEdb4b7abf/19dd4d6cc859d205.jpg.webp',
      aHref: 'http://www.baidu.com'
    },
    methods: {

    }
  })
</script>
</body>
</html>

在这里插入图片描述

二、v-bind动态绑定class(对象语法).html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .active {
      color: red;
    }
  </style>
</head>
<body>

<div id="app">
  <!-- <h2 class="active">{{message}}</h2> -->
  <!-- <h2 :class="DefActive">{{message}}</h2> -->

  <!-- <h2 v-bind:class="{key1: value1, key2: value2}">{{message}}</h2> -->
  <!-- <h2 v-bind:class="{类名1：true，类名2：boolean}">{{message}}</h2> -->
  <!-- class的属性是会合并的 -->
  <h2 class="title" v-bind:class="{active: isActive, line: isLine}">{{message}}</h2>
  <button v-on:click="btnClick">按钮</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app', //用于挂载要管理的元素
    data: { //定义数据
      message: '你好啊',
      DefActive: 'active',
      isActive: true,
      isLine: true
    },
    methods: {
      btnClick: function () {
        this.isActive = !this.isActive
      }
    }
  })
</script>
</body>
</html>

在这里插入图片描述

三、v-bind动态绑定class(数组语法).html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <h2 class="title" :class="[active, line]">{{message}}</h2>
  <h2 class="title" :class="getClasses()">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app', //用于挂载要管理的元素
    data: { //定义数据
      message: '你好啊',
      active: 'aaaaaa',
      line: 'bbbbbb'
    },
    methods: {
      getClasses : function () {
        return [this.active, this.line]
      }
    }
  })
</script>
</body>
</html>

表示字符串的话就加单引号，表示变量的话就不加。

在这里插入图片描述

四、作业(v-for和v-bind的结合).html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .active {
      color: red
    }
  </style>
</head>
<body>

<!-- 作业需求：点击列表中的哪一项，那么该项的文字变成红色 -->
<div id="app">
  <ul>
    <!-- <li v-for="m in movies">{{m}}</li> -->
    <li :click="change()" :class="{active: isActive}" v-for="(m, index) in movies">{{index}}-{{m}}</li>
  </ul>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app', //用于挂载要管理的元素
    data: { //定义数据
      movies: ['海贼王', '海尔兄弟', '火影忍者', '进击的巨人'],
      isActive: false
    },
    methods: {
      change: function() {
        this.isActive = true;
      }
    }
  })
</script>
</body>
</html>

五、v-bind动态绑定style(对象语法).html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .title {
      font-size: 50px;
      color: red;
    }
  </style>
</head>
<body>

<div id="app">
  <!-- <h2 :style="{key(属性名)：value(属性值)}">{{message}}</h2> -->

  <!-- '50px'必须加上单引号，否则是当作一个变量去解析 -->
  <h2 :style="{fontSize:'50px'}">{{message}}</h2>

  <!-- finalSize当成一个变量使用 -->
  <!-- <h2 :style="{fontSize: finalSize}">{{message}}</h2> -->
  <h2 :style="{fontSize: finalSize + 'px', backgroundColor: finalColor}">{{message}}</h2>
  <h2 :style="getStyles()">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app', //用于挂载要管理的元素
    data: { //定义数据
      message: '你好啊',
      finalSize: 100,
      finalColor: 'red'
    },
    methods: {
      getStyles: function () { 
        return {fontSize: this.finalSize + 'px', backgroundColor: this.finalColor}
      }
    }
  })
</script>
</body>
</html>

在这里插入图片描述

六、v-bind动态绑定style(数组语法).html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <h2 :style="[baseStyle, baseStyle1]">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app', //用于挂载要管理的元素
    data: { //定义数据
      message: '你好啊',
      baseStyle: {backgroundColor: 'red'},
      baseStyle1: {fontSize: '100px'},
    },
    methods: {

    }
  })
</script>
</body>
</html>

在这里插入图片描述

多次拒绝易烊千玺/dog.jpg

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
03-动态绑定属性

一、v-bind的基本使用.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app">  <!-- <img src=
复制链接

扫一扫