v-bind ｜青训营笔记这是我参与「第四届青训营」笔记创作活动的的第17天前面我们学习的指令主要作用是将值插入到

这是我参与「第四届青训营」笔记创作活动的的第17天

前面我们学习的指令主要作用是将值插入到我们模板的内容当中。

但是，除了内容需要动态来决定外，某些属性我们也希望动态来绑定。比如动态绑定a元素的href属性比如动态绑定img元素的src属性

这个时候，我们可以使用v-bind指令∶

作用︰动态绑定属性

缩写︰ : 语法糖

预期:any (with argument) | Object (without argument)

参数:attrOrProp (optional)

下面，我们就具体来学习v-bind的使用。

v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值(这个学到组件时再介绍)

在开发中，有哪些属性需要动态进行绑定呢? 比如图片的链接src、网站的链接href、动态绑定一些类、样式等等比如通过Vue实例中的data绑定元素的src和href，代码如下︰

<div id="app">
<!-- 错误写法：这里不可以使用mustache语法 -->
  <img src="{{imgurl}}" alt="">
<!-- 正确写法：使用v-bind指令 -->
  <img v-bind:src="imgurl" alt="">
  <a :href="baidu">百度一下</a>
</div>
<script src="./vue.js"></script>
<script>
    const app = new Vue({
        el : '#app',
        data : {
          message : '你好',
          imgurl : "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg10.360buyimg.com%2Fn1%2Fjfs%2Ft1%2F204636%2F4%2F4269%2F751608%2F6130796eEbcc04c42%2F9ab2a899227c998a.png&refer=http%3A%2F%2Fimg10.360buyimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652701703&t=7cd7696266c996b6d73fbfb309c59b03",
          baidu : "https://www.baidu.com"
        },
    })
</script>

v-bind动态绑定class属性

一. 绑定方法：对象语法 -- class后面跟一个对象

v-bind可以给class赋字符串，也可以赋对象，类名+boolean，boolean值为true将类名添加给标签，<h3>通过boolean值判断标签是否有该类名</h3>

用之前的class写法，vue会自己将他们合并固定的class用原先的方法，可能之后会修改的class用vue方法

用法：

1. 直接通过{}绑定一个类 `

也可以通过判断,传入多个值 <h2 v-bind:class="{active: true, line: false}">{{message}}</h2>
和普通的类同时存在,并不冲突注:如果isActive和isLine都为true，那么会有title/active/line三个类 <h2 class="title" v-bind:class="{active: isactive, line: isline}">{{message}}</h2>
如果过于复杂,可以放在一个methods或者computed中注: classes是一个计算属性 <h2 class="title" :class="classes">Hello world</h2>
在调用methods里的函数，接收返回值 <h2 class="title" v-bind:class="getclasses()">{{message}}</h2>

二. 绑定方法：数组语法 -- class后面跟一个数组

用法：

用法一:直接通过[]绑定一个类 `

Hello world

用法二:也可以传入多个值 :class="['active', 'line' ] ">Hello world</h2>

用法三:和普通的类同时存在，并不冲突注:会有title/ active/line三个类 <h2 class="title" :class="[ 'active', 'line' ]">Hello world</h2>

用法四:如果过于复杂，可以放在一个methods或者computed中注: classes是一个计算属性 <h2 class="title" :class="classes">Hello world</h2>

<style>
  .active{
    color: brown;
  }
</style>
<div id="a">
  <!-- <h2 :class="active">{{message}}</h2> -->
  <!-- <h2 v-bind:class="{类名1 : boolean, 类名2 : boolean}">{{message}}</h2> -->
  <!-- <h2 v-bind:class="{active: true, line: false}">{{message}}</h2> -->
  <h2 class="title" v-bind:class="{active: isactive, line: isline}">{{message}}</h2>
  <h2 class="title" v-bind:class="getclasses()">{{message}}</h2> // 调用函数要加（），运算符，表示执行方法，不加是绑定
  
  <h2 class="title" :class="['active','line']">hello,world</h2> // 字符串，写死
  <h2 class="title" :class="[active,line]">hello,world</h2> // 用变量，动态替换
  <h2 class="title" :class="getarr()">hello,world</h2> // 函数返回值
  <button v-on:click="cclick">按钮</button>
</div>
<script src="./vue.js"></script>
<script>
  const a = new Vue({
      el : '#a',
      data : {
        message : '你好',
        // active : 'active',
        isactive : true,
        isline : true,
        active : 'aaaaa',
        line : 'bbb'
      },
      methods : {
          cclick : function () {
            this.isactive = !this.isactive;
          },
          getclasses : function () {
            return {active: this.isactive, line: this.isline}
          },
          getarr : function () {
            return [this.active,this.line]
          }
      }
  })
  // a.isactive = false;
</script>

作业：第一条为红色，之后点击谁谁变为红色 v-on v-for 下标

<div id="b">
  <ul>
      <li>{{movies[0]}}</li>
      <li>{{movies[1]}}</li>
      <li>{{movies[2]}}</li>
      <li>{{movies[3]}}</li>
      <br>
      <li v-for="item in movies">{{item}}</li> 
      <!-- vue管理的元素进行遍历时,发现v-for就会帮你对某些东西进行遍历 -->
  </ul> 
</div>

<script src="./vue.js"></script>
<script>     
  const b = new Vue({
      el : '#b',
      data : {
          message : 'hello',
          movies : ['怦然心动','初恋那件小事','泰坦尼克号','真爱至上','闻香识女人']
      }
  })
</script>

v-bind绑定style

我们可以利用v-bind:style来绑定一些CSS内联样式。 // 为什么要动态绑定style，在组件化开发中，例如京东的导航栏不同页面不一样，写在css上面不好修改

在写CSS属性名的时候，比如font-size 我们可以使用驼峰式(camelCase) fontSize 或短横线分隔(kebab-case，记得用单引号括起来)'font-size' // 报错

绑定class有两种方式:

绑定方式一:对象语法 :style="{color: currentcolor,fontsize: fontsize + 'px'}" style后面跟的是一个对象类型对象的key是css属性名称对象的value是具体赋的值，值可以来自于data中的属性

绑定方式二:数组语法

style后面跟的是一个数组类型多个值以，逗号分割即可

<div id="c">
    <!-- <h2 :style="{key(css属性名):value(属性值)}">{{message}}</h2> -->
    <h2 :style="{fontSize:'50px'}">{{message}}</h2> // '50px' 之前写法中css样式不加'',在vue里面，不加''会当作变量解析，找不到该变量会报错
    <!-- <h2 :style="{font-size:'50px'}">{{message}}</h2> // font-size写法报错-->
    <h2 :style="{fontSize:finalsize,color:fincolor}">{{message}}</h2> // finalsize没有'',当成变量使用
    <h2 :style="{fontSize:size+'px'}">{{message}}</h2>
    <h2 :style="getstyle()">{{message}}</h2>

    <h2 :style="[base,base1]">{{message}}</h2>
</div>
<script src="./vue.js"></script>
<script>
    const c = new Vue({
        el : '#c',
        data : {
          message : '你好x',
          finalsize : '50px',
          size : 100,
          fincolor : 'lightblue',
          base : { backgroundColor : 'brown' },
          base1 : { fontSize : '20px' }
          },
          methods : {
            getstyle : function () {
              return {fontSize:this.finalsize,color:this.fincolor}
            }
          }
    })
</script>

v-bind ｜ 青训营笔记

v-bind动态绑定class属性

用法：

{{message}}

用法：

Hello world

v-bind绑定style

v-bind ｜青训营笔记