vuejs指令总结

vuejs指令总结

一句话概括:数据决定决定显示

简介:Vue.js的指令是以v-开头的,它们作用于HTML元素,会为绑定的目标元素添加一些特殊的行为,可以将指令看作特殊的HTML特性(attribute)。

特别提示:

1.{{这里必须是一个表达式}}

  1. v-指令 这种格式,一旦使用了指令,虽然我们写的值看起来是字符串,因为我们使用"值",但这个值已经是javascript了。

  2. v-text

    v-text可以用于替换插值表达式,如果有v-text,那么插值不起使用

    {{msg}}
    {{msg}}
    //前者会生效,后者被替代
    //这样可显示msg的内容
  3. v-html

    如果是富文本编辑器的内容,直接渲染的话,是被转义过的,那么html标签就会直接被渲染到页面

    //错误示范
    
    {{content}}
    //正确用法

常见内置指令:

  • v-if指令

  • v-show指令

  • v-else指令

  • v-for指令

  • v-bind指令

  • v-on指令

v-if指令

v-if是条件渲染指令,它根据表达式的真假来删除和插入元素

基本语法:
v-if="expression(表达式)"
expression是一个返回布尔值的表达式,表达式可以是一个布尔属性,也可以是一个返回布尔的运算式。

已完成
age:{{age}}
var vm = new Vue({ el: '#app', data: { age:25, isCompleted: true } })

v-else指令

v-else指令与v-if或者v-show同时使用,v-if条件不成立则会显示v-else内容

男士
女士
var vm = new Vue({ el: '#app', data: { isMale:true } })

v-for指令

v-for指令基于一个数组渲染一个列表,它和JavaScript的遍历语法相似
v-for="item in list"
list是一个数组,item是当前遍历的数组元素
v-for="(item,index) in list"其中index是当前循环的索引,下标从0开始

{{msg}}
  • {{item.id}} {{item.title}} {{item.isCompleted ? '已完成' : '未完成'}} 已完成 未完成

v-bind指令

v-bind:属性 用于动态绑定元素的属性 ,可简写为 :属性

  • {{item.id}}.{{item.title}}

v-on 指令

v-on用于监听DOM事件,用法和v-bind类似,例如给button添加点击事件

这是一个弹窗

v-show指令

v-show和v-if区别。
v-show不管条件是否成立,都会渲染html,而v-if只有条件成立才会渲染

  • v-if 直接是移除dom节点或者插入v-show是通过改变style的css样式,即display

    v-show对于需要频繁切换显示隐藏的节点特别适用,特别是弹窗,手机注册,邮箱注册的两个tab的切换

  
这是一个弹窗
这是另一个弹窗
                • 待完善

你可能感兴趣的:(vuejs指令总结)