3.动态绑定属性

1.基本使用

v-bind用于动态绑定属性,在实际使用中我们通常会使用语法糖写法,省略v-bind

<!--  aHref=http://www.baidu.com,以下两种写法完全等同-->
  <a href="http://www.baidu.com">百度一下</a>
  <a v-bind:href="aHref">百度一下</a>
<!--  语法糖写法,省略v-bind-->
  <a :href="aHref">百度一下</a>

2.动态绑定class

2.1.对象语法

动态绑定class属性时可传入一个对象参数,对象参数的格式是:

{
	className: bool	//className:class名,bool:是否使用这个class
}

例:

下列html代码表示使用active类,不使用line类

<h2 class="title" :class="{active:true,line:false}">{{message}}</h2>

2.2.数组语法

动态绑定class属性也可以传入一个数组参数,数组元素表示要使用的class.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
<!--  直接使用active和line类-->
  <h2 :class="['active', 'line']">{{message}}</h2>
<!--  解析之后为['aa','bb']-->
  <h2 :class="[active, line]">{{message}}</h2>
<!--  调用getClasses()之后为['aa','bb']-->
  <h2 :class="getClasses()">{{message}}</h2>

</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好',
      active: 'aa',
      line: 'bb'
    },
    methods:{
      getClasses:function () {
        return [this.active, this.line]
      }
    }
  })
</script>
</body>
</html>

3.动态绑定style

3.1对象语法

动态绑定style属性可传入一个对象参数,格式为:

:style="{key(属性名): value(属性值)}"

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
<!--  :style="{key(属性名): value(属性值)}"-->
<!--  '50px'需要加单引号,否则会解析为变量-->
  <h2 :style="{fontSize:'50px',color:'red'}">{{message}}</h2>
  <h2 :style="{fontSize:finalSize+'px',color:finalColor}">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好',
      finalSize: 100,
      finalColor: 'red'
    }
  })
</script>
</body>
</html>

3.2数组语法

动态绑定style属性也可以传入一个数组参数,格式为

:style="[style1,style2]"

<!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:{
        color: 'red'
      },
      baseStyle1:{
        fontSize:'100px'
      }

    }
  })
</script>
</body>
</html>
posted @ 2020-08-17 15:39  心流flux  阅读(178)  评论(0)    收藏  举报