标题:vue 语法 | 作者: catfish | 时间:2020年01月19日
暂无法显示图片

胡子语法

在Mustache语法中,不仅仅可以写变量,还可以写一些简单的表达式。只能在内容中使用mustache语法,不能在属性中使用。如果想在属性中使用,请使用v-bind指令。

{{ firstname }} {{lastname}}
{{ firstname + ' ' + lastname}}
{{ count * 2 }}

v-once

不随着变量的改变而改变。
使用如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <h2>{{ message }}</h2>
    <h2 v-once>{{ message }}</h2>
</div>
<script type="text/javascript">
    const app = new Vue({      // var let const
        el:"#app",
        data:{
            message: "hello Vue!"
        },
    })
</script>
</body>
</html>

v-html

解析成html

v-text=”message”

直接展示文本,一般不使用,防止覆盖。

v-pre

不解析,原封不动的显示出来。

v-cloak

斗篷指令。显示和不显示

<style>
  [v-cloak]{
    display:none;
  }
</style>
<div id="app" v-cloak>

v-bind

基本使用:

<img v-bind:src="imgURL" alt="">

语法糖的写法:

<img :src="imgURL" alt="">

高级使用:

class动态

对象语法和数组语法。首先我们看一下对象语法。对象语法中key值是类名,value值是一个boolean值,为true代表有这个类,为false代表没有这个类。基本写法如下:

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

其中isActive和isLine代表在data字典中定义的布尔值,这样,我们可以轻松操控该布尔值的有无。
关于数组语法则用的比较少。

<h2 class="title" :class="['active', link]"></h2>

active表示字符串,link表示在data中定义的变量。

style动态

对象语法和数组语法

<h2 :style="{fontSize:'50px'}">{{message}}</h2>

前面不加后面要加单引号,否则当一个变量被解析。
数组语法:

<h2 :style="[baseStyle]"></h2>

 

我要评论

没有登录?请先登录后再评论

最新评论

暂无人评论,来抢个沙发吧!