ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

VUE指令(二)

2026/9/16 14:53:56 拓冰建站 浏览量
VUE指令(二)

vue会根据不同的指令,针对不同的标签实现不同的功能。指令是带有 v- 前缀的特殊标签属性。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。

        8、v-for:基于数据循环,多次渲染整个元素(数组、对象、数字等),v-for = "(item--每一项, index--下标) in 数组"   key = "唯一标识" ,若不需要下标,可使用 v-for = "item in 数组",key是给列表添加的唯一标识,只能是唯一的字符串或数字,便于vue进行列表项的正确排序及复用;

<ul><li v-for="(item, index) in list" :key="index">{{ item }} - {{ index }}</li>
</ul>data: {list: ['西瓜', '苹果', '鸭梨', '榴莲']
}

        9、v-model给表单元素使用, 实现双向数据绑定,可以快速获取或设置表单元素内容,v-model = '变量;

账户:<input type="text" v-model="username"> <br><br>
密码:<input type="password" v-model="password"> <br><br>
<button @click="login">登录</button>data: {username: '',password: ''
},methods: {login () {console.log(this.username, this.password)},
}
  • .lazy- 监听 change 事件而不是 input
  • .number- 将输入的合法字符串转为数字
  • .trim- 移除输入内容两端空格

         10、v-slot:声明具名插槽或是期望接收 props 的作用域插槽;

         11、v-pre:跳过该元素及其所有子元素的编译;        

         12、v-once:仅渲染元素和组件一次,并跳过之后的更新;