vue中常见的v指令

    常用指令

  •     v-text 设置双标签元素的innerText
  •     v-html 设置双标签元素的innerHTML
  •     v-if 插入或者移除元素(true,插入,false移除)
  •     v-else 保证上方兄弟节点存在v-if || v-else-if
  •         v-if v-else 只会有其一存在
  •     v-show 隐藏或者显示元素
  •     v-model 双向数据绑定( 元素必须有value, DOM元素的value与js内存变量的属性绑定)

   class结合v-bind使用

  • 变化的属性可以以v-bind的赋变化的值
  • v-bind:属性名=“表达式||对象”
  • 简写方式 :属性名=“表达式||对象”
  • 设置一个样式 三元表达式
  • 设置多个样式 对象的形式
  • 对象 {样式名:是否使用bool,样式名:是否使用}

    methods和v-on的使

     options:

        methods 是一个对象,key是函数名,value是函数体

                v-on:DOM原生事件=“表达式||函数”

                如果调用函数没有参数,()可以省略

        简写方式: @事件名=“表达式||函数”

v-for的使用

  • v-for=“xxxx in items” :key=“index”

总结

  • 数组v-for="(ele,index) in dataArr " :key=“index”
  • 对象v-for="(value,key,index) in dataObj" :key=“index”




    
    Document
    


    


        
{{msg}}

        
        
{{msg}}

        
        

        

        

                

  •         

    

    
    

你可能感兴趣的:(vue.js,前端,javascript)