Vue模板里有哪些语法

在这里，我们说模板就是特指表示HTML结构的字符串，英文来说就是 template

一、展示内容

1、表达式

{{ object.a }} // 表达式

{{ n+1 }} // 可以写任何运算

{{ fn(n) }} // 可以调用函数 （一般在methods里面找到函数且调用）

如果值为 undefined 或 null 就不显示，这是经过Vue处理的

另一种写法为

<div v-text="表达式"></div>

2、HTML内容

假设 data.x 值为 <strong>hi</strong>

<div v-html="x"></div> 即可显示粗体的 hi

3、就想展示{{ n }} 的花括号的话

如：<div v-pre>{{ n }}</div>

就添加：v-pre 因为它不会对模板进行编译

二、绑定属性

1、绑定 src

<img v-bind:src="x" />

可以简写为：

<img :src="x" />

2、绑定对象

<div

        :style="{border:'1px solid red', height:100}">

    </div>

这里把'100px'写成100，Vue默认即为100为100px，当需要100em时，自己需要写100em

三、绑定事件

方法：v-on:事件名

可以缩写为： @事件名

不同的三种方式：

例如：

1、

<button v-on:click="add">-1</button>

//点击之后，Vue会运行 add()

<button @click="add">-1</button>//这是缩写

2、

<button v-on:click="xxx(1)">-1</button>

//点击后，Vue会运行 xxx(1)

PS：如果xxx(1)返回一个函数，怎么办呢？

那就直接把xxx(1)的这个函数给赋值到一个变量，比如： 赋值给一个add，然后就直接写add就好了。 但是不推荐这样用。

3、

<button v-on:click="n+=1">xxx</button>

//点击后，Vue会运行 n+=1

总结：如果发现函数就加个括号调用，否则就直接运行代码

四、条件判断

    <div v-if="x>0">

        x 大于 0

    </div>

    <div v-else-if="x===0">

        x 为 0

    </div>

    <div v-else>

        x 小于 0

    </div>

五、循环

for(value,key) in 对象或数组

    //数组例子

    <ul>

        <li v-for="(u,index) in users" :key="index">    //后面这个 :key="xxx" 必须写，不然会报错

            索引:{{index}} 值:{{u.name}}

        </li>

    </ul>

    //对象例子

    <ul>

        <li v-for="(value,name) in obj" :key="name">    //key后面最好放一个唯一性的值进去

            属性名:{{name}} 属性值:{{name}}

        </li>

    </ul>

六、显示、隐藏

v-show

    <div v-show="n%2===0">

        n 是偶数

    </div>

//真就显示，假就不显示

总结：

Vue模板的主要特点：

使用 XML 语法

使用{{}}插入表达式

使用v-html 、 v-on 、-v-bind 等指令操作DOM

使用v-if 、 v-for 等指令实现条件判断和循环

文章来源：https://www.jianshu.com/p/ccc938680fab