这篇文章盘点了Vue的所有基础操作,如果有人找到了不在文章中的基础操作,这就说明它对我来说已经不是基础了。
1、v-if、v-else-if、v-else、v-show
这四个属性中,只有v-else后面没有跟上="",且v-else前面必须跟着v-if或者v-else-if,v-else-if前面必须跟着v-if。
v-show和前面仨货的区别就是v-show是隐藏了自己,就是display的操作,前面仨货如果判断元素不存在,是真的没有渲染元素,也就是说在html代码里是找不到的
<span v-if="bool1"></span> //bool1都是data中定义的布尔值 <span v-else-if="!bool1"></span> //也可以在引号中写上一些简单的判断 <span v-else></span> <span v-show="bool1"></span>
2、v-bind、v-on和v-model
v-bind绑定属性,可简写为" : ";v-on绑定事件,可简写为" @ ";v-model一般都是绑定表单内元素,实现双向绑定。具体使用方法会在下文有体现。
3、v-for
"{{}}" 两个大括号中间可以填属性值
<ol> <!-- 循环数组,item为数组内对象,index为下标 --> <li v-for="(item,index) in arr1" :key="item.id">{{item.id}}--{{item.name}}--{{index}}</li> </ol> <ol> <!-- 循环对象,value为属性值,name为属性名,index为下标 --> <li v-for="(value,name,index) in obj1" :key="value">{{name}}--{{value}}--{{index}}</li> </ol> <ol> <!-- 循环数字,item为数组内对象,index为下标 --> <li v-for="num in num1" :key="num">{{num}}</li> </ol> //下面是对应的属性 arr1:[{id:0,name:"张三"},{id:0,name:"李四"},{id:0,name:"王二麻子"}], obj1:{name:"张三",age:"18"}, num1:3
4、