v-bind

Posted So istes immer

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了v-bind相关的知识,希望对你有一定的参考价值。

1.v-bind指令

v-bind作用:动态绑定属性
除了内容需要动态决定,有些属性我们也希望动态绑定
比如a元素的href属性、img元素的src属性
错误做法
<img src="{{imgURL}}" alt="">
属性后面不可以用Mustache语法

正确做法如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <img v-bind:src="imgURL" alt="">
  <a v-bind:href="aHref">百度一下</a>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      imgURL: '../images/01.jpg',
      aHref: 'https://www.baidu.com'
    }
  })
</script>
</body>
</html>

语法糖的写法:就用一个冒号

<img :src="imgURL" alt="">
<a :href="aHref">百度一下</a>

2.v-bind动态绑定class

2.1绑定方法:对象语法(class后面跟的是一个对象)
使用方法:<h2 class="{类名1:boolean, 类名2: boolean}">{{message}}}</h2>
当类名的值为true,那么这个class就被添加到当前标签,值为false就不添加

2.2 绑定方法:数组语法(用的较少)
如果{}中的内容很复杂,可以放到methods中,然后再调用这个方法。
使用方法:<h2 class="[类名1, 类名2]">{{message}}}</h2>
当[]里面的类名加了引号就表示字符串它本身,不加引号就表示一个变量

<!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="{类名1:boolean, 类名2: boolean}">{{message}}}</h2>-->
  <h2 class="title" :class="{active: isActive, line: isLine}">{{message}}</h2>
  <h2 class="title" :class="getClasses()">{{message}}</h2>
<!--  数组语法-->
  <h2 class="title" :class="['active','line']">{{message}}</h2>
  <h2 class="title" :class="[active,line]">{{message}}</h2>
<!--  按钮-->
  <button v-on:click="btnClick">改变颜色</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:'你好啊!',
      isActive: true,
      isLine: false
    },
    methods: {
      btnClick: function(){
        this.isActive = !this.isActive;
      },
      getClasses: function(){
        return {active: this.isActive, line: this.isLine};
      }
    }
  })
</script>
</body>
</html>

3.v-bind动态绑定style

3.1 对象语法
用法:style后面跟的是对象类型
<h2 :style="{key(属性名): value(属性值)}">{{message}}

写css属性名的时候
可以用驼峰式(camelCase),如fontSize
也可以用短横线分割(kebab-case),如front-size

3.2数组语法
用法:style后面跟的是数组类型,多个值以‘,’分割
<h2 :style=",[属性名1,属性值2]">{{message}}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Title</title>
</head>
<body>
<div id="app">
<!--  对象语法-->
<!--  50px必须加上一对单引号,否则被当成变量去解析-->
  <h2 :style="{fontSize: '50px'}">{{message}}</h2>
<!--  fSize被当成一个变量去解析-->
  <h2 :style="{fontSize: fSize,background:bColor}">{{message}}</h2>
  <h2 :style="{fontSize: fSize_value + 'px'}">{{message}}</h2>
<!--  数组语法-->
  <h2 :style="[baseStyle1,baseStyle2]">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:'你好啊!',
      fSize:'100px',
      fSize_value:100,
      bColor:'red',
      baseStyle1: {background:'blue'},
      baseStyle2: {fontSize: '30px'},
    }
  })
</script>
</body>
</html>

以上是关于v-bind的主要内容,如果未能解决你的问题,请参考以下文章

vue3.2 基础及常用方法

为啥 v-bind:class 不起作用?

189v-bind:is实现动态组件的效果

[vuejs源码系列] auto detect CSS prefix

vue-language-server :迭代中的元素期望有 'v-bind:key' 指令

关键依赖:依赖的请求是一个表达式,当使用 v-bind 时