0
点赞
收藏
分享

微信扫一扫

Vue基础 --- 指令

年夜雪 2023-07-02 阅读 39

1. 内容渲染指令

v-text ---- 缺点:覆盖元素中的默认内容
{{}} ---- 插值只能用在元素的内容节点,无法用在属性节点
v-html ---- 用处:把带有HTML标签的字符串,染为真正的DOM元素

2. 属性绑定指令

v-bind
简写 :

3. 事件绑定指令

v-on:
简写@
@click="show"和 @click=“show(传参)”
内置的变量 $event @click=“show(3,Sevent)”
事件修饰符 .prevent .stop
按键修饰符 .esc .enter

4. 双向数据绑定指令

v-model-只能用在表单元素上

修饰符
.number
.trim
.lazy

5. 循环渲染指令

v-for=“(item,index)in 数组”
key=“item.id”
拿索引当key没有意义

6. 条件渲染指令

动态创建和移除元素
v-else-if
v-else
v-show 动态添加和移除display:none样式

7. 过滤器

全局过滤器:Vue.filter(‘名字’,function(过滤器前面的值){return 结果})
私有过滤器:定义到组件的 filters节点之下
调用:{{message| dateFormat }}

举报

相关推荐

Vue 基础指令

Vue.js基础指令

Vue基础学习 v-model指令

Vue指令

vue指令

0 条评论