vuejs指令总结

vuejs指令总结

一句话概括：数据决定决定显示。

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

特别提示：

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

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

3. v-text

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

   {{msg}}
   {{msg}}
    //前者会生效，后者被替代
    //这样可显示msg的内容
   

4. 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-bind一样，v-on也可以使用简写，用@符号代替，修改代码：

我们来看个例子：

img

隐藏/显示弹窗 隐藏/显示弹窗 隐藏/显示弹窗

这是一个弹窗

v-show指令

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

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

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

  

   
    
这是一个弹窗
    
这是另一个弹窗
  

  
  

• • • • • • • • 待完善