Vue模板里有哪些语法

手机游戏开发者 · 2024-9-6 05:24:10

在这里，我们说模板就是特指表现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 等指令实现条件判断和循环

Vue模板里有哪些语法

所属分类: 问答交流

新帖推荐: 30日

推荐作品