zoukankan      html  css  js  c++  java
  • vue指令参考

    vue 指令 directive, 只是dom上的行间属性,vue给这类属性赋予一定的意义来实现特殊的功能。所有指令以v-

    开头。

    <input type="text" v-model='message' >
    //value 属性默认会被vue忽略,selected,checked属性也如此。
    let vm=new Vue({
       el:'#app',
       data:{
          person:{name: ' '} //使用变量时先要初始化,否则新加的属性不会导致页面更新。即 name需要赋值,哪怕赋值为空。如果没定义该属性,则需用vm.$set(vm.person, 'name', 'aaa')给对象添加响应式数据变化,或用替换原对象方法,即vm.person={name:'aaa'}
        }
    });
    let vm=new Vue({
       el:'#app',
       data:{
          arr:[1,2,3]//改变数组中的某一项是监控不到的,也不能使用改变其长度的方法。即 vm.arr[0]=xxx, vm.arr.length-=1,可使用可改变原数组值的函数加工。如pop,push,shift,unshift,sort,reverse,splice,也可用map, filter等函数,如:
      //vm.arr=vm.arr.map(val=>val*=2);
    
        }
    });    

    v-once 指令:只绑定一次。当数据再次变化也不会导致页面刷新。

    <div v-once>{{name}}</div>

    v-html:渲染带html代码的字符串. 一定要是可信任的html

    <div v-html="text"></div>
    let vm=new Vue({
       el:'#app',
       data:{
          name:'aaa',
          text:'<p>hello world!</p>'
        },
      
    });    
    v-for 指令
    <ul>
    <li v-for="item in items">{{item.name}}:{{item.price}}</li> //不加索引的格式
    </ul>
    
    <ul>
    <li v-for="(item,index) in items">{{item.name}}:{{index+1}}</li> //加索引的格式
    </ul>

    v-for 循环嵌套

    <ul>
    <li v-for="item in items">{{item.name}}:{{item.price}}</li>
    <ul>
    <li v-for="(type,childindex) in items.types">{{childindex+1}}:{{type}}</li>
    </ul>
    </ul>

    v-on 事件处理

    调用无参数函数:
    <div v-on:click='clickme‘> Click Me </div>
    或者:
    <div @click="clickme">Click Me </div>
    let vm=new Vue({
       el:'#app',
       data:{
          name:'aaa'
        },
        methods:{
        clickme(){alert(this.name)}
        }
    });    
    调用有参数函数:
    <div v-on:click='clickme($event,1)‘> Click Me </div>
    let vm=new Vue({
       el:'#app',
       data:{
          name:'aaa'
        },
        methods:{
        clickme(event, param){if param==1 console.log(event)}
        }
    });    

    如果不传参数,则v-on:click后调用函数不要写括号,会自动传入事件源。如果传参数,要手动传入$event属性。methods中的this指代根实例,即vm. methods和data里的数据会全放到vm上,且名字不能冲突。

  • 相关阅读:
    oracle 导入数据时提示只有 DBA 才能导入由其他 DBA 导出的文件
    oracle 常用语句
    android udp 无法收到数据 (模拟器中)
    android DatagramSocket send 发送数据出错
    AtCoder ABC 128E Roadwork
    AtCoder ABC 128D equeue
    AtCoder ABC 127F Absolute Minima
    AtCoder ABC 127E Cell Distance
    CodeForces 1166E The LCMs Must be Large
    CodeForces 1166D Cute Sequences
  • 原文地址:https://www.cnblogs.com/itwatcher/p/8410713.html
Copyright © 2011-2022 走看看