模板template的三种写法

一.vue完整版，写在html里

<div id="xxx">

{{n}}

<button @click="add">+1</button>

</div>

new vue({

el:'xxx'

data:{n:0}//data可以改成函数

methods：{add(){}}

})

模板里有哪些语法

我们把html模板叫做template

表达式

{{object.a}}表达式

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

{{fn（n）}}可以调用函数

如果值为undefined/unll就不显示

另一种写法为<div v-text=表达式></div>

html内容

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

<div v-html="x"><div>即可显示相关的hi

我就想展示{{n}}

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

v-pre不会对模板进行编译

绑定属性

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

v-bind简写为：<img:src='x'/>

绑定对象

<div>:style=({border:1px solid red,height:100})</div>

可以把100px写成100

绑定事件

v-on：事件名

<button v-on:click='add'>+1<button>

点击就会运行vue  add（）

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

点击后就会运行xxx（1）

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

点击后，vue就会运行n+=1

既发现函数就加括号调用之，否则就直接运行代码

这就导致一个问题，如果xxx（1）返回一个函数咋办哪

缩写

<button @click='add'>+1</button>

条件判断

if   eles

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

</div>

<div v-else-if='x'===0>x等于0

</div>

<div v-else>

小于0

</div>

循环

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

<ul>

<li v-for="(value.index) in users :key="index''>

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

</li>

</ul>

<ul>

<li v-for="(value,name)in obj":key=name>

属性名字{{name},属性值{{name}}

</ul>

显示，隐藏

v-show

<div v-show=""n%2===0">n是偶数</div>

近似等于

<div:style="{display:n%z===0?'block:none'}">n是偶数</div>

但你要注意，看得见的元素display不只是有block

如果table的display为table

如果li的display为list-item