Vue-指令

2019-01-16 05:49:29来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

1. v-text:这个指令用于将vue实例中的data内的属性渲染到标签内。有两种写法:

  1. `<div v-text="数据"></div>`:该写法会将div内的所有内容清空,然后渲染成对应的数据。

  2. `<div>{{数据}}</div>`:该写法为v-text的简写,被称为胡子语法或差值语法。该写法只会在{{}}对应的地方渲染数据,而不会改变div内其他位置的内容

  3. 由上述两个特点可以知道,{{}}更实用,简便,所以用得更多

  4. 无法识别标签

2. v-html:这个指令与v-text的作用相同,只有一点不同,即可以识别标签

3. v-model:这个指令可以用于input,select,textarea,组件这四种。作用是双向数据绑定,在标签上改变的值会影响到data的数据,data的数据改变也会影响到标签上的值

4. v-show:这个指令用于改变元素的显示/隐藏。当v-show绑定的值为true时,元素显示;反之,隐藏。这个实现是利用display

5. v-if/v-else-if/v-else:这个指令同样可以改变元素的显示/隐藏。当绑定的值为true时,元素显示;反之,隐藏。与v-show不同的是,这个指令改变了DOM树,会将元素改变为注释节点。与v-show的取舍,需要看情景。例如,v-if改变了DOM树,比较耗性能,所以在频繁切换时,会选择使用v-show。

6. v-on:这个指令绑定了事件触发时执行的methods中的方法。

  1.写法

    1. <div v-on:click="方法名"></div>

    2. <div :click="方法名"></div>

  2. 当触发时要传入参数,则可以这样写:<div :click="方法(参数)"></div>

  3. 如果逻辑简单,可以直接用逻辑代码代替方法

  4. 修饰符:例如:<div :keyup.enter="方法"></div>

7. v-bind:该指令用于修改元素属性,例如<img v-bind:src="" />

  1. 简写:<img :src="" />

8. v-for:该指令用于循环渲染页面

  1. 写法:<li v-for="(item, index) in 数据">{{item}}</li>

  2. 数据:array | object | string | number

9. v-cloak:该指令用于为还没有被vue编译完成的胡子语法添加样式。需要配合css的属性选择器:[v-cloak]来添加样式

10. 还有两个很少用的指令v-once,v-pre


原文链接:https://www.cnblogs.com/NikoChen/p/10272059.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:javascript--淘宝页面的放大镜效果

下一篇:14JavaScript条件语句