P3-动态绑定属性

最新推荐文章于 2023-03-02 17:18:44 发布

Bruce小鬼

最新推荐文章于 2023-03-02 17:18:44 发布

阅读量668

点赞数

分类专栏：最美前端 # VUE【vue核心】

本文链接：https://blog.csdn.net/m0_38039437/article/details/110181267

版权

最美前端同时被 2 个专栏收录

202 篇文章 30 订阅

订阅专栏

VUE【vue核心】

92 篇文章 9 订阅

订阅专栏

P3-动态绑定属性

1.动态绑定属性概述

在开发页面展示内容过程中，不仅仅是内容需要动态绑定，我们的属性也需要动态绑定，例如在不同的页面中显示的颜色背景、动态图片地址的更新都是需要动态绑定，这样当数据更新后，我们就不需要修改代码来更新页面的展示样式了。

2.v-bind概述

v-bind就用用来实现属性的动态绑定。
v-bind动态绑定语法

作用：动态绑定属性
缩写：:
预期：any (with argument) | Object (without argument)
参数：attrOrProp (optional)

3.v-bind 使用介绍

3.1.v-bind基本使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
 
<div id="app">
  <!-- 使用v-bind指令动态绑定属性值，当data中的imgURL和aHref 数据改变时候，div展示层将自动改变，无需修改代码 -->
  <img v-bind:src="imgURL" alt="">
  <a v-bind:href="aHref">百度一下</a>

  <!-- v-bind语法糖写法 省去了v-bing直接写一个冒号即可-->
  <img :src="imgURL" alt="动漫">
  <a :href="aHref">百度一下</a>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好vue',
      imgURL: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606313752264&di=81ec0f4e5b1c210641d1d169539e05db&imgtype=0&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D3646262474%2C2245266927%26fm%3D214%26gp%3D0.jpg',
      aHref: 'http://www.baidu.com'
    }
  })
</script>
</body>
</html>

3.2.v-bind动态绑定class对象语法

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

  <style>
    .active {
      color: red;
    }
  </style>
</head>
<body>
<div id="app">
  <!-- v-bind绑定class对象语法 -->
  <!--<h2 v-bind:class="{key1: value1, key2: value2}">{{message}}</h2>-->
  <!--<h2 v-bind:class="{类名1: true, 类名2: boolean}">{{message}}</h2>-->

  <!-- v-bind绑定class对象示例  -->
  <h2 v-bind:class="{active: isActive , line: isLine}">{{message}}</h2>

  <!-- 上面v-bind绑定class对象的缺点是不够简洁，在大括号里需要些许多个类名。可以将对象的内容放到方法中，这里接收方法返回的数据就简洁了。 -->
  <h2 v-bind:class="getClasses()">{{message}}</h2>

  

  <!-- 当有多个class属性时候，可以将固定的class放在v-bind外面，变动的class使用v-bind绑定实现两种类型class共存 -->
  <h2 class="topic" v-bind:class="getClasses()">{{message}}</h2>

  <!-- class属性绑定事件，触发class名称为active的属性是否显示红色 -->
  <button v-on:click="btnClick()">按钮</button>


</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好vue',
      isActive: true,
      isLine: true
    },
    // 通过该方法控制isActive是否为true实现style中.active样式是否生效。
    methods:{
      btnClick: function(){
        this.isActive = !this.isActive
      },
      getClasses: function(){
        return {active: this.isActive , line: this.isLine}
      }
    }
  })
</script>
</body>
</html>

3.2.1.效果展示

在这里插入图片描述

3.3.v-bind动态绑定class数组语法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <h2 v-bind:class="[active, line]">{{message}}</h2>

  <!-- 调用getClasses方法，动态绑定数组格式数据 -->
  <h2 v-bind:class="getClasses()">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好vue',
      active: 'a',
      line: 'l'
    },
    methods: {
      // 返回一个数组格式
      getClasses: function(){
        return [this.active, this.line]
      }
    }
  })
</script>
</body>
</html>

3.4.v-bind动态绑定style对象语法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!-- v-bind绑定style对象语法 -->
  <!--<h2 :style="{key(属性名): value(属性值)}">{{message}}</h2>-->

  <!-- v-bind绑定style对象示例 -->
  <h2 v-bind:style="{fontSize:finalSize+'px', backgroundColor:finalColor}">{{message}}</h2>

  <!-- 优化上面v-bind绑定style对象，将style对象中的数据替换成方法，书写更简洁。 -->
  <h2 :style="getStyles()">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'Hello vue',
      finalSize: 50,
      finalColor: 'red'
    },
    methods: {
      getStyles: function(){
        return {fontSize:this.finalSize+'px', backgroundColor:this.finalColor}
      }
    }
  })
</script>
</body>
</html>

3.4.1.动态绑定属性效果展示

原始展示
动态修改数据展示

3.5.v-bind动态绑定style数组语法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!-- v-bind绑定style数组示例 -->
  <h2 :style="[baseStyle, otherStyle]">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'Hello VUE',
      baseStyle: {backgroundColor: 'red'},
      otherStyle: {fontSize: 'red'}
    }
  })
</script>
</body>
</html>

Bruce小鬼

关注

0
点赞
踩
0

收藏

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

P3-动态绑定属性1.动态绑定属性概述在开发页面展示内容过程中，不仅仅是内容需要动态绑定，我们的属性也需要动态绑定，例如在不同的页面中显示的颜色背景、动态图片地址的更新都是需要动态绑定，这样当数据更新后，我们就不需要修改代码来更新页面的展示样式了。2.v-bind概述v-bind就用用来实现属性的动态绑定。v-bind动态绑定语法作用：动态绑定属性缩写：:预期：any (with argument) | Object (without argument)参数：attrOrProp
复制链接

扫一扫