03.Vue api [v-bind]

最新推荐文章于 2023-10-31 23:31:58 发布

@司马懿

最新推荐文章于 2023-10-31 23:31:58 发布

阅读量224

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/qq_40406929/article/details/118680551

版权

VUE 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在Vue.js中使用v-bind动态绑定属性，包括基本的src和href属性，以及更复杂的对象语法如v-model绑定class属性和条件合并。通过实例演示了如何利用v-on:click控制类属性变化和优化方法来管理多个class。

摘要由CSDN通过智能技术生成

动态绑定属性

1.之前都是通过mustance语法绑定数值到内容当中，但是有时候很多情况我们都需要绑定到属性中；

2.例如 <img src="imgUrl" alt=""/>，此时就需要 v-model 标签了，还有 href 标签等。

基础版

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

<div id="app">
 <img v-bind:src="imgUrl" alt=""/>
  <img src="imgUrl" alt=""/><!--不管用-->
  <img v-bind:src="imgUrl" alt=""/>
</div>

<!-- 引入vue.js 文件-->
<script src="../js/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      imgUrl: 'https://img.alicdn.com/imgextra/i4/28505401/O1CN01Za2u7a1plhpGwPO7z_!!0-saturn_solar.jpg_468x468q75.jpg_.webp'
    }
  })
</script>
</body>
</html>

进阶版（对象语法）：v-bind 动态绑定class属性，然后根据class属性去定义颜色

vue class对象的运用以及class属性的合并验证

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

  <style>
    .active{
        color: blue;
    }
  </style>
</head>
<body>

<div id="app">
  <!--定义属性active-->
  <h2 class="active">{{message}}</h2>
  <!--v-model绑定class属性-->
  <h2 :class="cModelActive">{{message}}</h2>

  <!--
    注意：下面是一个大框，表示一个对象，而不是mustance语法，对象可以放键值对
    这个class 可以赋予多重几个属性，进行合并

    因此，我们控制这个boolean进行控制这个类属性是否合并到这个class上
    <h3 v-bind:class="{类名1:true,类名:boolean}"></h3>
    下面举例验证
  -->

  <!--v-model绑定class属性-->
  <h2 :class="{active:activeBoolean,line:lineBoolean}">{{message}}</h2>
  <!--点击事件控制Boolean值的变化-->
  <button v-on:click="btnClick">按钮</button>
</div>

<!-- 引入vue.js 文件-->
<script src="../js/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      message: '你好啊，华为！',

      // class属性赋值 active
      cModelActive: 'active',

      // Boolean
      activeBoolean: true,
      lineBoolean: true
    },
    methods: {
      btnClick:function (){
        this.activeBoolean = !this.activeBoolean;
      }
    }
  })
</script>
</body>
</html>

注意：class同一个元素可以有两个class

<h2 :class = "title" :class ="{'active':isActive,'line':isLine}">Hello world</h2>

考虑：由于对象语法可能会加载更多的class是，就会导致 line 太长，用起来不太方便；
        所以对 v-bind 属性绑定进行优化，把class属性放到methods方法中进行赋值

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

  <style>
      .active{
          color: blue;
      }
  </style>
</head>
<body>

<div id="app">
  <h2 class="title" :class="{active:activeBoolean,line:lineBoolean}">{{message}}</h2>
  <button v-on:click="btnClick">按钮</button>

  <!--
  考虑：由于对象语法可能会加载更多的class是，就会导致 line 太长
       用起来不太方便
  -->
  <h2 class="title" :class="getClass()">{{message}}</h2>
</div>

<!-- 引入vue.js 文件-->
<script src="../js/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      message: '你好啊，华为！',

      // class属性赋值 active
      cModelActive: 'active',

      // Boolean
      activeBoolean: true,
      lineBoolean: true
    },
    methods: {
      btnClick:function (){
        this.activeBoolean = !this.activeBoolean;
      },
      getClass:function (){
        return {active:this.activeBoolean,line:this.lineBoolean}
      }
    }
  })
</script>
</body>
</html>