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属性

<style>
    .aClass {
        color: #f00;
    }
    .bClass {
        color: #00f;
    }
</style>
<div id="demo1">
    <h1>class绑定</h1>
    <p class="cClass" :class="a">xxx是字符串</p>
    <!--属性名:类的名字，属性值:true/false-->
    <p :class="{aClass: isA, bClass: isB}">xxx是对象</p>
    <p :class="['aClass', 'bClass']">xxx是数组</p>
    <button type="button" @click="update">更改</button>
    <p :style="{color: activeColor, fontSize: fontSize + 'px'}">style绑定</p>    <!--{} 是js对象-->
</div>
<script>
 var vm1 = new Vue({
        el: '#demo1',
        data: {
            a: 'aClass',
            isA: true,
            isB: false,
            activeColor: 'red',
            fontSize: 20
        },
        methods: {
            update() {
                // 一定用this引用data中变量名
                this.a = 'bClass';
                this.isA = false;
                this.isB = true;
                this.activeColor = 'green';
                this.fontSize = 30;
            }
        }
    });
</script>

二、条件渲染指令：

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

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

<div id="demo2">
<p v-if="ok">成功了</p>
<p v-else>失败</p>

<p v-show="ok">show成功了</p>
<p v-show="!ok">show失败</p>
<button @click="ok=!ok">切换</button>
</div>
<script>
new Vue({
   el: '#demo2',
   data: {
      ok: false
   }
})
</script>

三、列表渲染

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

1、替换与删除

<!--
1. 列表显示
  数组: v-for / index
  对象: v-for / key
2. 列表的更新显示
  删除item
  替换item
-->
<div id="demo">
  <h2>测试: v-for 遍历数组</h2>
  <ul>
    <li v-for="(p, index) in persons" :key="index">
      {{index}}--{{p.name}}--{{p.age}}
      --<button @click="deleteP(index)">删除</button>
      --<button @click="updateP(index, {name:'Cat', age: 16})">更新</button>
    </li>
  </ul>
  <button @click="addP({name: 'xfzhang', age: 18})">添加</button>
  <h2>测试: v-for 遍历对象</h2>
  <ul>
    <li v-for="(item, key) in persons[1]" :key="key">{{key}}={{item}}</li>
  </ul>
</div>
<script type="text/javascript">
  new Vue({
    el: '#demo',
    data: {
      persons: [ // vue本身只是监视persons的改变，没有监视数组内部数据的改变
        {name: 'Tom', age:18},
        {name: 'Jack', age:17},
        {name: 'Bob', age:19},
        {name: 'Mary', age:16}
      ]
    },
    methods: {
      deleteP (index) {
      // 删除persons中指定index的内容
        this.persons.splice(index, 1) 
      // 此处splice，调用了不是原生数组的splice(), 而是一个vue变异方法，功能： // 1. 调用原生的数组的对应方法 // 2. 更新界面
      },
     updateP (index, newP) {
        console.log('updateP', index, newP)
        // this.persons[index] = newP  // 并没有改变persons本身，数组内部发生改变，并没有调用变异方法
        this.persons.splice(index, 1, newP)
        // this.persons = [] //改变person
      },

      addP (newP) {
        this.persons.push(newP)
      }
    }
  })
</script>

2、过滤与排序

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

<div id="demo">
  <input type="text" v-model="searchName">
  <ul>
    <li v-for="(p, index) in filterPersons" :key="index">
      {{index}}--{{p.name}}--{{p.age}}
    </li>
  </ul>
  <div>
    <button @click="setOrderType(2)">年龄升序</button>
    <button @click="setOrderType(1)">年龄降序</button>
    <button @click="setOrderType(0)">原本顺序</button>
  </div>
</div>
<script type="text/javascript">
  new Vue({
    el: '#demo',
    data: {
      searchName: '',
      orderType: 0, // 0代表不排序, 1代表降序, 2代表升序
      persons: [
        {name: 'Tom', age:18},
        {name: 'Jack', age:17},
        {name: 'Bob', age:19},
        {name: 'Mary', age:16}
      ]
    },
    computed: {
      // 计算属性：可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新。
      filterPersons () {
        // 取出相关数据
        const {searchName, persons, orderType} = this；
        // 最终需要显示的数组
        let arr；
        // 过滤数组
        if(searchName.trim()) {
          arr = persons.filter(p => p.name.indexOf(searchName)!==-1)
        }
        // 排序
        if(orderType) {
          arr.sort(function (p1, p2) { // 如果返回负数 p1在前，返回正数P2在前
            if(orderType===1) { // 降序
              return p2.age-p1.age；
            } else { // 升序
              return p1.age-p2.age；
            }
          })
        }
        return arr；
      }
    },
    methods: {
      setOrderType (orderType) {
        this.orderType = orderType；
      }
    }
  })
</script>

作者：奋斗滴猩猩
链接：https://www.jianshu.com/p/9556232f1278
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。