Vue插值 指令

Vue插值 指令

#Vue简介

vue插值语法
1.{{}}
插值表达式{{}} 主要用于数据绑定

{{}}中的可以是文本属性和表达式
如：文本：Message:{{msg}}
属性：

{{this.abc}}

false:false,
表达式：

{{100+200}}

其中也可以为函数，

{{title}}

2.指令：

v-if:v-if 可以根据表达式的值在DOM中生成或移除一个元素。
v-show：v-show 可以根据表达式的值显示或者隐藏HTML元素。
v-else：v-else 必须跟着v-if或v-show，充当else功能。
注意：v-if和v-show的区别：v-if后面如果是false就不会渲染，直接把改标签从文档中删除，v-show后面是false的话会渲染，只是不显示，状态为disp：none

看得见

看不见

a

b

{{type}}

data: {
title:“喜欢哭”,
seen:false,
type:“c”
},
v-text ：v-text指令可以更新元素的textContent，作用和{{Mustache}}一样
v-html ：v-html指令可以更新元素的innerHtml，作用和{{{Mustache}}}一样
注意：v-text中渲染的只是文本
v-html中可以渲染标签
v-bind ：v-bind指令用于编辑标签的属性

可以简写为：
v-on ：v-on指令用于绑定事件监听器。事件类型由参数指定；表达式可以是一个方法的名字或一个内联语句；如果没有修饰符，也可以省略。


可以简写为：<button @click=“doThis”>