vue style动态绑定样式_11月01日Vue基础02-CSDN博客

北京的CETC中电太极集团贼厉害，可惜只能在那里待4天，足矣！

越努力，越幸运。

1、class与style绑定

01、class与style绑定

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

02、class绑定

:class='xxx'
表达式是字符串: 'classA'
表达式是对象: {classA:isA, classB: isB}
表达式是数组: ['classA', 'classB']

03、style绑定

:style="{ color: activeColor, fontSize: fontSize + 'px' }"
其中activeColor/fontSize是data属性

    04_class与style绑定      .classA {      color: red;    }    .classB {      background: blue;    }    .classC {      font-size: 20px;    }

`1. class绑定: :class='xxx'`

xxx是字符串

xxx是对象

xxx是数组

`2. style绑定`

:style="{ color: activeColor, fontSize: fontSize + 'px' }"

更新

 new Vue({ el: '#demo', data: { myClass: 'classA', hasClassA: true, hasClassB: false, activeColor: 'red', fontSize: '20px' }, methods: { update () { this.myClass = 'classB' this.hasClassA = !this.hasClassA this.hasClassB = !this.hasClassB this.activeColor = 'yellow' this.fontSize = '30px' } } })

2、Vue条件渲染

01、条件渲染指令

v-if与v-else
v-show

02、比较v-if与v-show

如果需要频繁切换v-show较好
当条件不成立时，v-if的所有子节点不会解析(项目中使用)

区别：

我们要隐藏一个元素有两种做法：

v-show：一种通过样式，即通过style就可以控制，display:none，元素还在内存里面，但没有显示
v-if ：我们要隐藏一个东西，还可以把它移除，把它从内存里面删除掉，需要再创建一个对象，再显示出来，时间比v-show比较慢一点

代码：

    08_条件渲染

表白成功

表白失败

求婚成功

求婚失败

切换

new Vue({ el: '#demo', data: { ok: true, } })

3、列表渲染

01、列表显示指令

数组：v-for / index
对象：v-for / key

02、列表的更新显示

删除 item
替换 item

    06_列表渲染

`测试: v-for 遍历数组`

{{index}}--{{p.name}}--{{p.age}} --删除 --更新添加

`测试: v-for 遍历对象`

{{key}}={{item}}

 //vue本身只是监视了persons的改变，没有监视数组内部数据的改变 //Vue重写了数组中的一系列改变数组内部数据的方法(先调用原生，更新界面)--->数组内部改变，界面自动变化 new Vue({ el: '#demo', data: {//数组 persons: [ {name: 'Tom', age:18}, {name: 'Jack', age:17}, {name: 'Bob', age:19}, {name: 'Mary', age:16} ] }, methods: { deleteP (index) { // 删除persons中指定index的p this.persons.splice(index, 1) // 调用了不是原生数组的splice(), 而是一个变异(重写)方法 // 1. 调用原生的数组的对应方法 // 2. 更新界面 }, updateP (index, newP) { console.log('updateP', index, newP) // 并没有改变persons本身，数组内部发生了变化，但并没有调用变异方法，vue不会更新界面 // this.persons[index] = newP this.persons.splice(index, 1, newP) // this.persons = [] }, addP (newP) { this.persons.push(newP) } } })

03、列表的高级处理

列表过滤
列表排序

    06_列表渲染_过滤与排序

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

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

 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: { filterPersons () { // 取出相关数据 const {searchName, persons, orderType} = this //最终需要显示的数组 let arr; // 过滤数组，如果p.name里面不包含searchName，就会返回-1，不进行过滤 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 } } })

4、事件处理

01、绑定监听

v-on:xxx="fun"

@xxx="fun"

@xxx="fun(参数)"

默认事件形参:event

隐含属性对象:$event

02、事件修饰符

.prevent：阻止事件的默认行为 event.preventDefault()

.stop：停止事件冒泡 event.stopPropagation()

03、按键修饰符

.keycode：操作的是某个keycode值的键

.keyName：操作的某个按键名的键(少部分)

<html lang="en"><head>  <meta charset="UTF-8">  <title>07_事件处理title>head><body><div id="example">  <h2>1. 绑定监听h2>  <button @click="test1">南京button>     <button @click="test2('abc')">test2button>  <button @click="test3('abcd', $event)">北京button>  <h2>2. 事件修饰符h2>    <a href="http://www.baidu.com" @click.prevent="test4">百度一下a>  <div style="width: 200px;height: 200px;background: red" @click="test5">        <div style="width: 100px;height: 100px;background: blue" @click.stop="test6">div>  div>  <h2>3. 按键修饰符h2>  <input type="text" @keyup.13="test7">  <input type="text" @keyup.enter="test7">  div><script type="text/javascript" src="../js/vue.js">script><script type="text/javascript">  new Vue({    el: '#example',    data: {    },    methods: {      test1(event) {        alert(event.target.innerHTML)      },      test2 (msg) {        alert(msg)      },      test3 (msg, event) {        alert(msg+'---'+event.target.textContent)      },      test4 () {        alert('点击了链接')      },      test5 () {        alert('out')      },      test6 () {        alert('inner')      },      test7 (event) {        console.log(event.keyCode)        alert(event.target.value)      }    }  })script>body>html>