vue学习(一)—vue,2024最新前端中级面试题目汇总解答

40 阅读2分钟

最后

前端CSS面试题文档,JavaScript面试题文档,Vue面试题文档,大厂面试题文档

开源分享:docs.qq.com/doc/DSmRnRG…

v-for&排序


  • {{item}}


  • {{student.name}}-{{student.age}}

  • {{index}}-{{student.name}}-{{student.age}}

  • value:{{value}}

    key:{{key}}

    index:{{index}}


注意:v-for也可以循环对象输出内容

这里写图片描述

一般最好加上

:key='index'

提高性能

  • v-text&v-html
v-text&v-html

v-text&v-html


{{message}}=

{{dodo}}


  • v-on
v-on

v-on


本场比赛得分:{{fenshu}}

加分

<button @click="jianfen">减分


<input type="text" @keyup.enter="onEnter" v-model="fenshu2" />


  • v-model双向数据绑定
v-model双向数据绑定

v-model双向数据绑定


元素数据:{{message}}

文本框


v-model :

v-model.lazy:

v-model.number:

v-model.trim:


文本域


多选框绑定一个值

{{isTrue}}


多选框绑定数组

huang

xiao

guo

{{web_names}}

单选框绑定

你选择的性别是:{{sex}}


  • v-bind
v-bind .classA { color: red; } .classB { font-size: 150%; } .red { background-color: red; } .blue { background-color: blue; } .green { background-color: green; } .pink { background-color: pink; }

v-bind


晓果博客


1、绑定Class
2、绑定Class中的判断
3、绑定Class中的数组
4、绑定Class中的三元运算符

isOK={{isOK}}


5、绑定Style
6、绑定Style 对象

通过某个字段选择样式

    :class="{'A':'red','B':'blue','C':'green','D':'pink'}[hero.score]">

    {{hero.name}},{{hero.score}}