Vuejs学习2.1 vue语法——插值语法，动态绑定属性

最新推荐文章于 2021-07-15 07:30:44 发布

to-and-fro

最新推荐文章于 2021-07-15 07:30:44 发布

阅读量481

点赞数

分类专栏： vuejs 文章标签： vue

本文链接：https://blog.csdn.net/qq_39225271/article/details/107920722

版权

vuejs 专栏收录该内容

28 篇文章 2 订阅

订阅专栏

Vue语法

插值语法
动态绑定

首先我们需要new一个vue对象来实现对特定id得模块进行操作，el表示模块的id（为字符串），data表示用到的数据（为对象），还包含methods等等

<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:"你好"
    }
  })
</script>

表示对于对应id=app的模块进行操作

插值语法

Mustache语法

例如：｛｛ｍｅｓｓａｇｅ｝｝，双大括号，不仅可以写变量还可以显示简单的表达式，vue会对message进行解析，如果寻找不到message将原样输出
例如：｛｛message＋“　”＋first｝｝，｛｛counter＊２｝｝，

<body>
<div id="app">
  <h2>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:"你好"
    }
  })
</script>
</body>

运行结果如下：
在这里插入图片描述

v-once

vue是响应式（表示数据改变，界面随之改变）
如果定义了v-once界面将不随数据改变而改变

<h2 v-once>{{message}}</h2>

通过js修改数据，界面将没有变化

v-html

v-html属性表示解析HTML（对于返回值是HTML时）

<body>
<div id="app">
  <h2>{{url}}</h2>
  <h2 v-html="url"></h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:"你好",
      url:"<a href='http://www.baidu.com'>百度一下</a>"
    }
  })
</script>
</body>

运行结果如下：
在这里插入图片描述

v-text

v-text相比较mustache语法具有覆盖效果

<body>
<div id="app">
  <h2>{{message}}</h2>
  <h2 v-text="message">学习Vue</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:"你好"
    }
  })
</script>
</body>

运行结果如下：
在这里插入图片描述

v-pre

v-pre表示不会解析，只能原来形式显示

<body>
<div id="app">
  <h2>{{message}}</h2>
  <h2 v-pre>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:"你好"
    }
  })
</script>
</body>

运行结果如下：
在这里插入图片描述

v-cloak

如果解析较慢时，界面会先原样显示，直到全部解析完界面才进行跳转
v-cloak属性可以设置未解析完时显示为空，直到正常显示

<body>
<div id="app" v-cloak>
  {{message}}
</div>
<script src="../js/vue.js"></script>
<script>
  setInterval(function () {
    const app = new Vue({
      el:'#app',
      data:{
        message:"你好"
      }
    })
  },1000)
</script>
</body>

上面设置了一秒后才创建vue对象对message进行解析，但是运行时界面不会显示{{message}}，而是显示为空，直到一秒后加载到界面“你好”

动态绑定

某些属性需要动态来绑定，例如：鼠标点击到按钮颜色为红色，不点击为灰色，等等一些情况，需要我们用v-bind指令来实现，v-bind的语法糖(即简写)为冒号（:）

基本使用

通过vue事例中data绑定元素的src和href属性

<body>
<div id="app">
  <img v-bind:src="imgUrl" alt="">
  <a v-bind:href="hrefUrl">百度一下</a>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:"你好",
      imgUrl:"https://images.cnblogs.com/cnblogs_com/" +
          "forget0909-Angle-Qi/1280349/o_QQ%E5%9B%BE%E7%89%8720180817111151.jpg",
      hrefUrl:"http://www.baidu.com"
    }
  })
</script>
</body>

动态绑定class

对象语法

根据bool值来判断是否添加class

<style>
    .active{
      color: red;
    }
</style>
<body>
<div id="app">
  <h2 :class="active">{{message}}</h2>
  <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:"你好",
      isActive:true,
      isLine:false,
    },
    methods:{
      btnClick:function () {
        this.isActive=!this.isActive;
      }
    }
  })
</script>
</body>

（methods表示vue实例中所操作方法，v-on用来监听事件）
通过点击按钮来修改第二个h2元素的颜色

数组语法

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

动态绑定style

对象语法

<div id="app">
  <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:'green',
    }
  })
</script>

在这里插入图片描述

数组语法

<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:{fontSize:50+'px'},
      baseStyle1:{color:'red'}
    }
  })
</script>

综合例子

用来表示点击哪一个字体就显示为红色

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .active{
      color: red;
    }
  </style>
</head>

<body>
<div id="app">
  <ul>
    <li v-for="(item,index) in movies" :class="{active:index==currentIndex}" v-on:click="change(index)">{{item}}</li>
  </ul>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:"你好",
      movies: ["海王","火影忍者","海尔兄弟","进击的巨人"],
      currentIndex:-1
    },
    methods:{
      change:function (index) {
          this.currentIndex=index;
      }
    }
  })
</script>
</body>
</html>

在这里插入图片描述

to-and-fro

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vuejs学习2.1 vue语法——插值语法，动态绑定属性

Vue语法插值语法Mustache语法v-oncev-htmlv-textv-prev-cloak动态绑定基本使用动态绑定class对象语法数组语法动态绑定style对象语法数组语法综合例子首先我们需要new一个vue对象来实现对特定id得模块进行操作，el表示模块的id（为字符串），data表示用到的数据（为对象），还包含methods等等<script> const app = new Vue({ el:'#app', data:{ message:"你好
复制链接

扫一扫