Vue.js指令实例

v-if  v-else  v-show

v-if 根据表达式的值的真假条件渲染元素。

v-else 不需要表达式.前一兄弟元素必须有 v-if 或 v-else-if

v-show 根据表达式之真假值,切换元素的 display CSS 属性


Vue.js指令实例_第1张图片 

v-for

基于源数据多次渲染元素或模板块。


Vue.js指令实例_第2张图片
 

v-text v-html

v-text 更新元素的 textContent。如果要更新部分的 textContent ,需要使用 {{ Mustache }} 插值。

v-html 更新元素的 innerHTML 。在网站上动态渲染任意 HTML 是非常危险的,因为容易导致 XSS 攻击。


Vue.js指令实例_第3张图片
 

v-on

绑定事件监听器。


Vue.js指令实例_第4张图片
 

v-model

在表单控件或者组件上创建双向绑定

还有修饰符

  • .lazy - 取代 input 监听 change 事件
  • .number - 输入字符串转为数字
  • .trim - 输入首尾空格过滤


Vue.js指令实例_第5张图片
 

v-bind

动态地绑定一个或多个特性,或一个组件 prop 到表达式。


Vue.js指令实例_第6张图片
 

v-pre v-cloak v-once

v-pre 可以用来显示原始 Mustache 标签

v-clock 渲染完成后加载

v-once 只渲染元素和组件一次


Vue.js指令实例_第7张图片
 

directive 自义定指令

顾名思义 自己定义的指令
Vue.js指令实例_第8张图片
 

转载于:https://www.cnblogs.com/webPang/p/8526815.html

你可能感兴趣的:(Vue.js指令实例)