十日谈 : Vue基本语法学习二

最新推荐文章于 2022-02-05 11:34:33 发布

扔猿太膻

最新推荐文章于 2022-02-05 11:34:33 发布

阅读量395

点赞数

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/qq_36013952/article/details/104290114

版权

前端专栏收录该内容

24 篇文章 1 订阅

订阅专栏

十日谈 : Vue基本语法学习

欢迎阅读我的Vue学习日记

欢迎阅读我的Vue学习日记

v-bind指令的使用

上一节提到的mustache等指令是插值到模板中去的
但是,出了内容需要动态来决定外,某些属性也希望动态的绑定

作用:动态绑定属性
预期:any(with argument)|object(without argument)
参数:attrOrProp(optional)
先定义模板,传图片参数进data:

<script>
  const app = new Vue({
    el:'#app',
      data:{
        message:'Hello Vue',
        imgURL:'https://csdnimg.cn/cdn/content-toolbar/csdn-logo_.png?v=20190924.1'
    }
  })
</script>

错误做法

<div id="app">
  <img src="{{imgURL}}">
</div>

mustache指令只能定义context内容,不能直接像前文那样使用
正确做法
使用v-bind指令动态绑定

<div id="app">
  <img v-bind:src="imgURL">
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
      data:{
        message:'Hello Vue',
        imgURL:'https://csdnimg.cn/cdn/content-toolbar/csdn-logo_.png?v=20190924.1'
    }
  })
</script>

从服务器请求过来的数据在data内,动态的绑定,解析,显示在页面上

v-bind语法糖

语法糖:简写方式
简写方式如下:

<div id="app">
  <img :src="imgURL">
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
      data:{
        message:'Hello Vue',
        imgURL:'https://csdnimg.cn/cdn/content-toolbar/csdn-logo_.png?v=20190924.1'
    }
  })
</script>

直接写冒号

v-bind动态绑定class(对象语法)

常规形式

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .active{
      color: red;
    }
  </style>
</head>
<body>
<div id="app">
  <h2 class="active">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
      data:{
        message:'Hello Vue'
    }
  })
</script>

v-bind动态绑定

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .active{
      color: red;
    }
  </style>
</head>
<body>
<div id="app">
  <h2 class="active">{{message}}</h2>
  <h2 :class="active">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
      data:{
        message:'Hello Vue',
        active:'active'
    }
  })
</script>

并不是多此一举的操作,后续文章会有用法解析
在v-bind动态绑定的class里面可以定义对象
而对象中可以传入键值对

<h2 :class="{key1: value1, key2: value2}">{{message}}</h2>

那么就可以通过value作为boolean型变量来控制key值的输出

<h2 :class="{类名1: boolean, 类名2: boolean}">{{message}}</h2>

演示:

  <style>
    .active{
      color: red;
    }
  </style>
</head>
<body>
<div id="app">
  <h2 :class="{active: isActive, line: isLine}">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
      data:{
        message:'Hello Vue',
        isActive:'true',
        isLine:'true'
    }
  })
</script>

操作:
原本,isActive与isLine初始均为true,故显示红色,active与line均作为对象存在class中:
在这里插入图片描述
修改isActive值为false后,active对象消失,颜色变为黑色:

案例:
设置一按钮,message默认为红色,点击一下变成黑色,再点一下变回红色

<!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="{active: isActive, line: isLine}">{{message}}</h2>
  <button v-on:click="btnClick">变色</button>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
      data:{
        message:'Hello Vue',
        isActive:'true',
        isLine:'true'
    },
    methods:{
      btnClick:function () {
        this.isActive = !this.isActive
      }
    }
  })
</script>
</body>
</html>

vue会自动合并class:

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

合并后:
在这里插入图片描述
平时操作时,不删改的class可以使用常规定义,需要经常删改的class则需要动态绑定v-bind.

也可将{active: isActive, line: isLine}放到函数中,使其看起来更简便:

<div id="app">
  <h2 class="title" :class="getClasses()">{{message}}</h2>
  <button v-on:click="btnClick">变色</button>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
      data:{
        message:'Hello Vue',
        isActive:'true',
        isLine:'true'
    },
    methods:{
      btnClick:function () {
        this.isActive = !this.isActive
      },
      getClasses:function () {
        return {active: this.isActive, line: this.isLine}
      }
    }
  })
</script>

v-bind动态绑定class(数组语法)

不经常使用,仅举例:

<div id="app">
<h2 class="title" :class="['active','line']">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
      data:{
        message:'Hello Vue'
    }
  })
</script>

在这里插入图片描述

v-bind动态绑定style

我们可以利用v-bind:style来绑定一些CSS内联样式
也分为对象语法和数组语法
绑定style对象语法:

 <h2 :style="{key(css的属性名):value(属性值)}">{{message}}</h2>

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <h2 :style="{fontSize: '50px'}">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
      data:{
        message:'Hello Vue'
    }
  })
</script>
</body>

类名不用加单引号,就作为变量解析
value一定要加单引号,否则是作为变量解析的

<div id="app">
  <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:'Hello Vue',
        finalSize:'100',
        finalColor:'red',
    }
  })
</script>