Vue(四):Vue的基础操作

这篇文章盘点了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、

  

猜你喜欢

转载自www.cnblogs.com/liangshibo/p/12944198.html