vue入门3---class与style绑定、条件渲染指令、列表渲染

一、class与style绑定

• 1.在应用界面中, 某个(些)元素的样式是变化的
  class/style 绑定就是专门用来实现动态样式效果的技术

  2. class绑定:
    class='xxx'
    xxx是字符串: 'classA'
    xxx是对象: {classA:isA, classB: isB}
    xxx是数组: ['classA', 'classB']
  3. style绑定
    ：style="{color: activeColor, fontSize: fontSize +    'px'}",activeColor/fontSize是data属性

    
class绑定
    
xxx是字符串
    
    
xxx是对象
    
xxx是数组
    更改
    
style绑定
    

二、条件渲染指令：

• v-if
• v-else
• v-show
• v-if 与 v-show的区别

  v-if 隐藏是通过将标签移除；v-show是通过style display=none,标签还存在；v-if还需要创建标签才可以显示，标签过多的话影响速度。

成功了
失败

show成功了
show失败
切换

三、列表渲染

• 定义: 使用v-for指令根据一组数组的选项列表进行渲染
• 注:1.v-for是1.0之后的版本才有的，1.0之前的版本用v-repeat；
  2.在 v-for 块中，我们拥有对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引；
  3.vue本身只是监视数组的改变，没有监视数组内部数据的改变，因此vue重写了数组中的一系列改变数组内部结构数据的方法，即变异方法，如splice、push等，可实现--原生功能、更新界面

1、替换与删除

  
测试: v-for 遍历数组
  

    

      {{index}}--{{p.name}}--{{p.age}}
      --删除
      --更新
    
  
  添加
  
测试: v-for 遍历对象
  

    
{{key}}={{item}}
  

2、过滤与排序

想要显示一个数组的过滤或排序副本，而不实际改变或重置原始数据。在这种情况下，可以创建返回过滤或排序数组的计算属性。

  
  

    

      {{index}}--{{p.name}}--{{p.age}}
    
  
  

    年龄升序
    年龄降序
    原本顺序