v-if、v-show、v-for、:key、:class与:style、:value

最新推荐文章于 2024-03-13 11:11:16 发布

Sparks550

最新推荐文章于 2024-03-13 11:11:16 发布

阅读量436

点赞数

分类专栏： Vue 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/sparks550/article/details/122252543

版权

Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

v-if

v-if:是vue 的一个内部指令，指令用在我们的html中。
v-if用来判断是否加载html的DOM，比如我们模拟一个用户登录状态，在用户登录后现实用户名称

  <div id="app">
        <div v-if="isLogin">你好：</div>
        <div v-else>请登录后操作</div>
    </div>
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
               isLogin:false
            }
        })
    </script>

v-show

调整css中display属性，DOM已经加载，只是CSS控制没有显示出来。

<div v-show="isLogin">你好</div>

区别

v-if：判断是否加载，可以减轻服务器的压力，在需要时加载。
v-show：调整css dispaly属性，可以使客户端操作更加流畅。

v-for解决循环问题

<body>
    <h1>v-if 判断是否加载</h1>
    <hr>
    <div id="app">
    <li v-for="item in items">
        {{item}}
    </li>
    </div>
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
               items:[1,22,33,2,15,1,6,16,5]
            },
            //在输出items之前，进行一种编程
            computed:{
                sortitems:function(){
                    return this.items.sort;
                }
            }
        })
    </script>
</body>

循环对象

<ul>
   <li v-for="student in students">
       {{student.name}} - {{student.age}}
   </li>
   <li v-for="(student,index) in students">
       {{index+1}}{{student.name}} - {{student.age}}//加个索引
   </li>
</ul>

对象排序

students:[
  {name:'jspang',age:32},
  {name:'Panda',age:30},
  {name:'PanPaN',age:21},
  {name:'King',age:45}
]
sortStudent:function(){
     return sortByKey(this.students,'age');
}
//数组对象方法排序:
function sortByKey(array,key){
    return array.sort(function(a,b){
      var x=a[key];
      var y=b[key];
      return ((x<y)?-1:((x>y)?1:0));
   });
}

排序的一个小bug

computed:{
    sortItems:function(){
    return this.items.sort(sortNumber);
    }
function sortNumber(a,b){
            return a-b
  }

:key

从数据库中获得的数据，一般都具有唯一识别的id。

是为了更方便的处理数据
无：key属性时，状态默认绑定的是位置；
有：key属性时，状态根据key的属性值绑定到了相应的数组元素。

例子：

:key=“c1.categoryId”

index：
而使用index作为key值，是容易产生BUG的。因为index永远是有序的，若用数组索引index为key，当向数组中指定位置插入一个新元素后，对应着后面的虚拟DOM的key值全部更新了，这个时候还是会做不必要的更新，就像没有加KEY一样

:class动态绑定样式

一张图理解
在这里插入图片描述

:style绑定内联样式

一张图理解
在这里插入图片描述
实例：

<div class="item-list clearfix" :style="{display:currentIndex == index?'block':'none'}">

:value 表单输入绑定

Sparks550

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-if、v-show、v-for、:key、:class与:style、:value

v-ifv-if:是vue 的一个内部指令，指令用在我们的html中。v-if用来判断是否加载html的DOM，比如我们模拟一个用户登录状态，在用户登录后现实用户名称 <div id="app"> <div v-if="isLogin">你好：</div> <div v-else>请登录后操作</div> </div> <script type="text/javascrip
复制链接

扫一扫

专栏目录