【数据代理+事件处理+计算属性与监视+绑定样式+条件渲染】

数据代理+事件处理+计算属性与监视+绑定样式+条件渲染

  • 1 数据代理
    • 1.1 回顾Object.defineProperty方法
    • 1.2 数据代理
  • 2 事件处理
    • 2.1 绑定监听
    • 2.2 事件修饰符
    • 2.3 键盘事件
  • 3 计算属性与监视
    • 3.1 计算属性
    • 3.2 监视属性(侦视属性)
    • 3.3 watch对比computed
  • 4 绑定样式
    • 4.1 绑定class样式
    • 4.2 绑定style样式
    • 4.3 总结
  • 5 条件渲染

1 数据代理

1.1 回顾Object.defineProperty方法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>回顾Object.defineProperty方法</title>
</head>
<body><!-- 给对象添加属性 --><script>let number = 30let person = {name:'张三',sex:'男'}// 给person添加age属性Object.defineProperty(person,'age',{// 可传递四个基本配置项/* value: 18,enumerable:true, // 控制属性是否可以枚举,默认值是falsewritable:true, // 控制属性是否可以被修改,默认值是falseconfigurable:true, // 控制属性是否可以被删除,默认值是false */// 传递高级配置// 当有人读取person的age属性时,get函数(getter)就会被调用,且返回值就是age的值// get:function(){get(){console.log('有人读取了age属性');return number},// 当有人修改person的age属性时,set函数(setter)就会被调用,且会收到修改的具体值set(value){console.log('有人修改了age属性,且值是',value);number = value}})// console.log(Object.keys(person));// console.log(person);</script>
</body>
</html>

在这里插入图片描述

1.2 数据代理

  • 数据代理:通过一个对象代理对另一个对象中的属性的操作(读/写)。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>何为数据代理</title>
</head>
<body><!-- 数据代理:通过一个对象代理对另一个对象中的属性的操作(读/写) --><script>let obj = { x: 100 }let obj2 = { y: 200 }// 想通过obj2读取或修改xObject.defineProperty(obj2,'x',{get(){return obj.x},set(value){obj.x = value}})</script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue中的数据代理</title><!-- 引入Vue --><script src="../JS/vue.js"></script>
</head>
<body><!--总结1.Vue中的数据代理:通过vm对象来代理data对象中属性的操作(读/写)2.Vue中数据代理的好处:更加方便的操作data中的数据3.基本原理:通过Object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性,都指定一个getter/setter。在getter/setter内部去操作(读/写)data中对应的属性。--><!-- 准备一个容器 --><div id="root"><h2>学校名称:{{name}}</h2><h2>学校地址:{{address}}</h2></div>
</body>
<script>Vue.config.productionTip = falseconst vm = new Vue({el: '#root',data: {name:'西财',address:'西安市长安区'}})
</script>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2 事件处理

2.1 绑定监听

在这里插入图片描述

  • 默认事件形参:event
  • 隐含属性对象:$event
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件的基本使用</title><!-- 引入Vue --><script src="../JS/vue.js"></script>
</head>
<body><!-- 事件的基本使用:1.使用v-on:xxx 或 @xxx 绑定事件,其中xxx是事件名;2.事件的回调需要配置在methods对象中,最终会在vm上;3.methods中配置的函数,不要用箭头函数!否则this就不是vm了;4.methods中配置的函数,都是被Vue所管理的函数,this的指向是vm 或 组件实例对象;5.@click="demo" 和 @click="demo($event)" 效果一致,但后者可以传参;--><!-- 准备好一个容器 --><div id="root"><h2>欢迎来到{{name}}的博客</h2><!-- <button v-on:click="showInfo1">点我提示信息1</button> --><!-- 可简写为 --><button @click="showInfo1">点我提示信息1(不传参)</button><button @click="showInfo2($event,66)">点我提示信息2(传参)</button></div>
</body>
<script>Vue.config.productionTip = falseconst vm = new Vue({el:'#root',data:{name:'小王'},methods:{showInfo1(event) {// console.log(event.target.innerText); // 点我提示信息1// console.log(this); // 此处的this是vmalert('同学你好!')},// showInfo2(event) {showInfo2(event,number) {// console.log(event.target.innerText); // 点我提示信息1// console.log(this); // 此处的this是vm// alert('同学你好!!')console.log(event,number);}}})
</script>
</html>

在这里插入图片描述

2.2 事件修饰符

  • prevent:阻止默认事件(常用)
  • stop:阻止事件冒泡(常用)
  • once:事件只触发一次(常用)
  • capture:使用事件的捕获模式
  • self:只有event.target是当前操作的元素时才触发事件
  • passive:事件的默认行为立即执行,无需等待事件回调执行完毕
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件修饰符</title><!-- 引入Vue --><script src="../JS/vue.js"></script><style>*{margin-top: 13px;}.demo1{height: 50px;background-color: skyblue;}.box1{padding: 5px;background-color: pink;}.box2{padding: 5px;background-color: orange;}.list{width: 200px;height: 200px;background-color: peru;overflow: auto; /* 形成滚动条 */}li{height: 100px;}</style>
</head>
<body><!--总结Vue中的事件修饰符:1.prevent:阻止默认事件(常用);2.stop:阻止事件冒泡(常用);3.once:事件只触发一次(常用);4.capture:使用事件的捕获模式;5.self:只有event.target是当前操作的元素时才触发事件;6.passive:事件的默认行为立即执行,无需等待事件回调执行完毕;--><!-- 准备好一个容器 --><div id="root"><h2>欢迎来到{{name}}的博客</h2><!-- 阻止默认事件 --><a href="https://blog.csdn.net/weixin_64875217?type=blog" @click.prevent="showInfo">点我提示信息</a> <!-- 方式二 --><!-- 阻止事件冒泡 --><div class="demo1" @click="showInfo"><button @click.stop="showInfo">点我提示信息</button> <!-- 方式二 --><!-- 修饰符可以连续写 --><!-- <a href="https://blog.csdn.net/weixin_64875217?type=blog" @click.stop.prevent="showInfo">点我提示信息</a> --></div><!-- 事件只触发一次 --><button @click.once="showInfo">点我提示信息</button><!-- 使用事件的捕获模式 --><div class="box1" @click.capture="showMsg(1)"> <!-- 点击div2,先输出1再输出2 -->div1<div class="box2" @click="showMsg(2)">div2</div></div><!-- 只有event.target是当前操作的元素时才触发事件 --><div class="demo1" @click.self="showInfo"><button @click="showInfo">点我提示信息</button> <!-- 方式二 --></div><!-- 事件的默认行为立即执行,无需等待事件回调执行完毕 --><!-- 滚动:scroll(滚动条滚动) wheel(滚动轮滚动) --><!-- <ul @scroll="demo" class="list"> --><ul @wheel.passive="demo" class="list"><li>1</li><li>2</li><li>3</li><li>4</li></ul></div>
</body>
<script>Vue.config.productionTip = falsenew Vue({el: '#root',data: {name:'小王',},methods: {showInfo(e) {// e.preventDefault() // 阻止默认行为:阻止跳转链接 (方式一)// e.stopPropagation() // 阻止事件冒泡:阻止弹出两次弹窗(方式一)alert('同学你好!')// console.log(e.target);},showMsg(msg) {console.log(msg);},demo() {// console.log('@');for (let i = 0; i < 100000; i++) {console.log('#');}console.log('累坏了');}}})
</script>
</html>

在这里插入图片描述

2.3 键盘事件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>键盘事件</title><!-- 引入Vue --><script src="../JS/vue.js"></script>
</head>
<body><!--总结1.Vue中常用的按键别名:回车 => enter删除 => delete (捕获“删除”和“退格”键)退出 => esc空格 => space换行 => tab (特殊,必须配合keydown去使用)上 => up下 => down左 => left右 => right2.Vue未提供别名的按键,可以使用按键原始的key值去绑定,但注意要转为kebab-case(短横线命名)3.系统修饰键(用法特殊):ctrl、alt、shift、meta(1).配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发。(2).配合keydown使用:正常触发事件。4.也可以使用keyCode去指定具体的按键(不推荐)5.Vue.config.keyCodes.自定义键名 = 键码,可以去定制按键别名--><!-- 准备好一个容器 --><div id="root"><h2>欢迎来到{{name}}的博客</h2><!-- <input type="text" placeholder="按下回车提示输入" @keyup.enter = "showInfo"> 方式二 --><!-- <input type="text" placeholder="按下回车提示输入" @keyup.13 = "showInfo"> --><!-- <input type="text" placeholder="按下回车提示输入" @keydown.tab = "showInfo"> --><!-- <input type="text" placeholder="按下回车提示输入" @keyup.caps-lock = "showInfo"> --><!-- <input type="text" placeholder="按下回车提示输入" @keyup.ctrl = "showInfo"> --><input type="text" placeholder="按下回车提示输入" @keyup.ctrl.y = "showInfo"> // 只有按ctrl+y时才会输出<!-- <input type="text" placeholder="按下回车提示输入" @keyup.huiche = "showInfo"> --></div>
</body>
<script>Vue.config.productionTip = falseVue.config.keyCodes.huiche = 13 // 相当于定义了一个别名按键new Vue({el:'#root',data:{name:'小王'},methods:{showInfo(e){// if(e.keyCode !== 13) return // 方式一// console.log(e.target.value);console.log(e.key,e.keyCode);}}})
</script>
</html>

3 计算属性与监视

3.1 计算属性

  • 姓名案例_插值语法实现:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>姓名案例_插值语法实现</title><!-- 引入Vue --><script src="../JS/vue.js"></script>
</head>
<body><!-- 准备好一个容器 --><div id="root"><!-- 姓:<input type="text" v-model:value="firstName"><br/><br/> -->姓:<input type="text" v-model="firstName"><br/><br/><!-- 名:<input type="text" v-model:value="lastName"><br/><br/> -->名:<input type="text" v-model="lastName"><br/><br/><!-- 全名:<span>{{firstName + '-' + lastName}}</span> -->全名:<span>{{firstName.slice(0,3)}}-{{lastName}}</span></div>
</body>
<script>Vue.config.productionTip = falsenew Vue({el:'#root',data:{firstName:'张',lastName:'三'}})
</script>
</html>

在这里插入图片描述

  • 姓名案例_methods实现:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>姓名案例_methods实现</title><!-- 引入Vue --><script src="../JS/vue.js"></script>
</head>
<body><!-- 准备好一个容器 --><div id="root"><!-- 姓:<input type="text" v-model:value="firstName"><br/><br/> -->姓:<input type="text" v-model="firstName"><br/><br/><!-- 名:<input type="text" v-model:value="lastName"><br/><br/> -->名:<input type="text" v-model="lastName"><br/><br/><!-- 全名:<span>{{firstName + '-' + lastName}}</span> -->全名:<span>{{fullName()}}</span></div>
</body>
<script>Vue.config.productionTip = falsenew Vue({el:'#root',data:{firstName:'张',lastName:'三'},methods:{fullName(){return this.firstName + '-' + this.lastName}}})
</script>
</html>

在这里插入图片描述

  • 姓名案例_计算属性实现:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>姓名案例_计算属性实现</title><!-- 引入Vue --><script src="../JS/vue.js"></script>
</head>
<body><!--总结计算属性:1.定义:要用的属性不存在,要通过已有属性计算得来。2.原理:底层借助了Objcet.defineproperty方法提供的getter和setter。3.get函数什么时候执行?(1).初次读取时会执行一次。(2).当依赖的数据发生改变时会被再次调用。4.优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便。5.备注:1.计算属性最终会出现在vm上,直接读取使用即可。2.如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变。--><!-- 准备好一个容器 --><div id="root"><!-- 姓:<input type="text" v-model:value="firstName"><br/><br/> -->姓:<input type="text" v-model="firstName"><br/><br/><!-- 名:<input type="text" v-model:value="lastName"><br/><br/> -->名:<input type="text" v-model="lastName"><br/><br/><!-- 全名:<span>{{firstName + '-' + lastName}}</span> -->全名:<span>{{fullName}}</span></div>
</body>
<script>Vue.config.productionTip = falseconst vm = new Vue({el:'#root',data:{firstName:'张',lastName:'三'},computed:{fullName:{// 当有人读取fullName时,get就会被调用,且返回值就作为fullName的值// get什么时候调用:1.初次读取fullName时 2.所依赖的数据发生变化时get(){console.log('get被调用了');// console.log(this); // 此处的this是vmreturn this.firstName + '-' + this.lastName},// set什么时候调用:当fullName被修改时set(value){console.log('set',value);const arr = value.split('-')this.firstName = arr[0]this.lastName = arr[1]}}}})
</script>
</html>
  • 姓名案例_计算属性简写实现(确定只读不改,就用简写):
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>姓名案例_计算属性简写实现</title><!-- 引入Vue --><script src="../JS/vue.js"></script>
</head>
<body><!-- 准备好一个容器 --><div id="root"><!-- 姓:<input type="text" v-model:value="firstName"><br/><br/> -->姓:<input type="text" v-model="firstName"><br/><br/><!-- 名:<input type="text" v-model:value="lastName"><br/><br/> -->名:<input type="text" v-model="lastName"><br/><br/><!-- 全名:<span>{{firstName + '-' + lastName}}</span> -->全名:<span>{{fullName}}</span> <!-- fullName看似是函数 实则是vm的属性值 因此此处不能写为{{fullName()}} --></div>
</body>
<script>Vue.config.productionTip = falseconst vm = new Vue({el:'#root',data:{firstName:'张',lastName:'三'},computed:{// 此时function及后面函数可看作get()/* fullName:function() {console.log('get被调用了');return this.firstName + '-' + this.lastName} */// 再精简:fullName() {console.log('get被调用了');return this.firstName + '-' + this.lastName}}})
</script>
</html>

3.2 监视属性(侦视属性)

  • 天气案例:点击一次按钮切换一次天气
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>天气案例</title><!-- 引入Vue --><script src="../JS/vue.js"></script>
</head>
<body><!-- 准备好一个容器 --><div id="root"><h2>今天天气很{{info}}</h2><!-- <button @click = 'changeWeather'>切换天气</button> --><!-- 32-36行简化后变为: --><button @click = 'isHot = !isHot'>切换天气</button></div>
</body>
<script>Vue.config.productionTip = falsenew Vue({el:'#root',data:{isHot:true},computed:{info(){return this.isHot ? '炎热' : '凉爽'}},/* methods:{changeWeather(){this.isHot = !this.isHot}} */// 简化后:methods:{}})
</script>
</html>

在这里插入图片描述
在这里插入图片描述

  • 天气案例_监视属性:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>天气案例_监视属性</title><!-- 引入Vue --><script src="../JS/vue.js"></script>
</head>
<body><!--总结监视属性watch:1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作2.监视的属性必须存在,才能进行监视!!3.监视的两种写法:(1).new Vue时传入watch配置(2).通过vm.$watch监视--><!-- 准备好一个容器 --><div id="root"><h2>今天天气很{{info}}</h2><button @click = 'changeWeather'>切换天气</button></div>
</body>
<script>Vue.config.productionTip = falseconst vm = new Vue({el:'#root',data:{isHot:true},computed:{info(){return this.isHot ? '炎热' : '凉爽'}},methods:{changeWeather(){this.isHot = !this.isHot}},// 监视写法一:/* watch:{// 此时监视的是isHotisHot:{immediate:true, // immediate默认值为false,初始化时让handler调用一下// handler()函数 什么时候调用:当isHot发生改变时就调用handler(newValue,oldValue){console.log('isHot被修改了',newValue,oldValue);}}} */})// 监视写法二:vm.$watch('isHot',{immediate:true, // immediate默认值为false,初始化时让handler调用一下// handler()函数 什么时候调用:当isHot发生改变时就调用handler(newValue,oldValue){console.log('isHot被修改了',newValue,oldValue);}})
</script>
</html>

在这里插入图片描述

  • 天气案例_深度监视:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>天气案例_深度监视</title><!-- 引入Vue --><script src="../JS/vue.js"></script>
</head>
<body><!--总结深度监视:(1).Vue中的watch默认不监测对象内部值的改变(一层)。(2).配置deep:true可以监测对象内部值改变(多层)。备注:(1).Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以!(2).使用watch时根据数据的具体结构,决定是否采用深度监视。--><!-- 准备好一个容器 --><div id="root"><h2>今天天气很{{info}}</h2><button @click = 'changeWeather'>切换天气</button><hr/><h3>a的值是{{numbers.a}}</h3><button @click="numbers.a++">点我让a+1</button><h3>b的值是{{numbers.b}}</h3><button @click="numbers.b++">点我让b+1</button><br/><br/><button @click="numbers = {a:666,b:888}">彻底替换掉numbers</button></div>
</body>
<script>Vue.config.productionTip = falseconst vm = new Vue({el:'#root',data:{isHot:true,numbers:{a:1,b:1}},computed:{info(){return this.isHot ? '炎热' : '凉爽'}},methods:{changeWeather(){this.isHot = !this.isHot}},watch:{// 此时监视的是isHotisHot:{// immediate:true, // immediate默认值为false,初始化时让handler调用一下// handler()函数 什么时候调用:当isHot发生改变时就调用handler(newValue,oldValue){console.log('isHot被修改了',newValue,oldValue);}},// 监视多级结构中某个属性的变化(只监测a)/* 'numbers.a':{handler(){console.log('a被改变了');}}, */// 监视整个numbers的改变(numbers整体改变)/* numbers:{handler(){console.log('numbers彻底改变了');}}, */// 监视多级结构中所有属性的变化(既监测a也监测b)numbers:{deep:true, // deep配置项 默认值是false 深入的、有深度的handler(){console.log('numbers改变了');}}}})
</script>
</html>

在这里插入图片描述
在这里插入图片描述

  • 天气案例_深度监视简写:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>天气案例_深度监视简写</title><!-- 引入Vue --><script src="../JS/vue.js"></script>
</head>
<body><!-- 准备好一个容器 --><div id="root"><h2>今天天气很{{info}}</h2><button @click = 'changeWeather'>切换天气</button></div>
</body>
<script>Vue.config.productionTip = falseconst vm = new Vue({el:'#root',data:{isHot:true,numbers:{a:1,b:1}},computed:{info(){return this.isHot ? '炎热' : '凉爽'}},methods:{changeWeather(){this.isHot = !this.isHot}},watch:{// 此时监视的是isHot// 正常写法:/* isHot:{// immediate:true, // immediate默认值为false,初始化时让handler调用一下// deep:true, // deep默认值为false,深度监视// 当配置项只有handler()时,可采用简写形式// handler()函数 什么时候调用:当isHot发生改变时就调用handler(newValue,oldValue){console.log('isHot被修改了',newValue,oldValue);}} */// 简写:/* isHot(newValue,oldValue){console.log('isHot被修改了',newValue,oldValue);} */}})// 正常写法:/* vm.$watch('isHot',{// immediate:true, // immediate默认值为false,初始化时让handler调用一下// deep:true, // deep默认值为false,深度监视handler(newValue,oldValue){console.log('isHot被修改了',newValue,oldValue);}}) */// 简写:vm.$watch('isHot',function(newValue,oldValue){console.log('isHot被修改了',newValue,oldValue);})
</script>
</html>

3.3 watch对比computed

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>姓名案例_watch实现</title><!-- 引入Vue --><script src="../JS/vue.js"></script>
</head>
<body><!--总结computed和watch之间的区别:1.computed能完成的功能,watch都可以完成。2.watch能完成的功能,computed不一定能完成,例如:watch可以进行异步操作(如:定时器)。两个重要的小原则:1.所被Vue管理的函数,最好写成普通函数,这样this的指向才是vm 或 组件实例对象。2.所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等、Promise的回调函数),最好写成箭头函数,这样this的指向才是vm 或 组件实例对象。--><!-- 准备好一个容器 --><div id="root"><!-- 姓:<input type="text" v-model:value="firstName"><br/><br/> -->姓:<input type="text" v-model="firstName"><br/><br/><!-- 名:<input type="text" v-model:value="lastName"><br/><br/> -->名:<input type="text" v-model="lastName"><br/><br/><!-- 全名:<span>{{firstName + '-' + lastName}}</span> -->全名:<span>{{fullName}}</span></div>
</body>
<script>Vue.config.productionTip = falseconst vm = new Vue({el:'#root',data:{firstName:'张',lastName:'三',fullName:'张-三'},computed:{// 此时function及后面函数可看作get()/* fullName:function() {console.log('get被调用了');return this.firstName + '-' + this.lastName} */// 再精简:/* fullName() {console.log('get被调用了');return this.firstName + '-' + this.lastName} */},watch:{firstName(newValue){// console.log(this); // this指向vmthis.fullName = newValue + '-' + this.lastName// 若要延时:/* setTimeout(()=>{console.log(this)this.fullName = val + '-' + this.lastName},1000); */},lastName(newValue){// console.log(this); // this指向vmthis.fullName = this.firstName + '-' + newValue}}})
</script>
</html>

4 绑定样式

4.1 绑定class样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>绑定样式</title><script src="../JS/vue.js"></script><style>.basic{width: 400px;height: 100px;border: 1px solid black;}.happy{border: 4px solid red;;background-color: rgba(255, 255, 0, 0.644);background: linear-gradient(30deg,yellow,pink,orange,yellow);}.sad{border: 4px dashed rgb(2, 197, 2);background-color: gray;}.normal{background-color: skyblue;}.atguigu1{background-color: yellowgreen;}.atguigu2{font-size: 30px;text-shadow:2px 2px 10px red;}.atguigu3{border-radius: 20px;}</style></head>
<body><!-- 准备好一个容器 --><div id="root"><!-- 绑定class样式——字符串写法,适用于:样式的类名不确定,需要动态指定 --><!-- class正常的样式正常写 变化的样式用绑定的方法:class写 --><div class="basic" :class="mood" id="demo" @click="changeMood">{{name}}</div><br/><br/><!-- 绑定class样式——数组写法,适用于:要绑定的样式个数不确定、名字也不确定 --><div class="basic" :class="classArr">{{name}}</div><br/><br/><!-- 绑定class样式——对象写法,适用于:要绑定的样式个数确定、名字也确定,但要动态决定用不用 --><div class="basic" :class="classObj">{{name}}</div></div>
</body>
<script>Vue.config.productionTip = falseconst vm = new Vue({el:'#root',data:{name:'小王',mood:'normal',classArr:['atguigu1','atguigu2','atguigu3'],classObj:{atguigu1:false,atguigu2:false}},methods:{changeMood(){// this.mood = 'happy' // 点击后 心情变为happy// 点击后 心情随机变const arr = ['happy','sad','normal']// 随机生成0、1、2三个数字中的任一个// Math.random() 生成的是0-1的数 无限接近于1 但得不到1// Math.random()*3 生成的是0-3的数 无限接近于3 但得不到3// Math.floor() 向下取整const index = Math.floor(Math.random()*3)this.mood = arr[index]}}})
</script>
</html>

在这里插入图片描述

4.2 绑定style样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>绑定样式</title><script src="../JS/vue.js"></script><style>.basic{width: 400px;height: 100px;border: 1px solid black;}.happy{border: 4px solid red;;background-color: rgba(255, 255, 0, 0.644);background: linear-gradient(30deg,yellow,pink,orange,yellow);}.sad{border: 4px dashed rgb(2, 197, 2);background-color: gray;}.normal{background-color: skyblue;}.atguigu1{background-color: yellowgreen;}.atguigu2{font-size: 30px;text-shadow:2px 2px 10px red;}.atguigu3{border-radius: 20px;}</style></head>
<body><!-- 准备好一个容器 --><div id="root"><!-- 绑定style样式——对象写法 --><!-- <div class="basic" :style="{fontSize: fsize+'px'}">{{name}}</div> --><div class="basic" :style="styleObj">{{name}}</div><br/><br/><!-- 绑定style样式——数组写法 --><!-- <div class="basic" :style="[styleObj,styleObj2]">{{name}}</div> --><div class="basic" :style="styleArr">{{name}}</div></div>
</body>
<script>Vue.config.productionTip = falseconst vm = new Vue({el:'#root',data:{name:'小王',// fsize:40styleObj:{fontSize: '40px',color:'skyblue',// backgroundColor:'orange'},/* styleObj2:{backgroundColor:'orange'}, */styleArr:[{fontSize: '40px',color:'skyblue',},{backgroundColor:'orange'}]}})
</script>
</html>

在这里插入图片描述

4.3 总结

<!--总结绑定样式:1. class样式写法:class="xxx" xxx可以是字符串、对象、数组。字符串写法适用于:类名不确定,要动态获取。对象写法适用于:要绑定多个样式,个数不确定,名字也不确定。数组写法适用于:要绑定多个样式,个数确定,名字也确定,但不确定用不用。2. style样式:style="{fontSize: xxx}"其中xxx是动态值。:style="[a,b]"其中a、b是样式对象。
-->

5 条件渲染

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>条件渲染</title><script src="../JS/vue.js"></script>
</head>
<body><!--总结条件渲染:1.v-if写法:(1).v-if="表达式" (2).v-else-if="表达式"(3).v-else="表达式"适用于:切换频率较低的场景。特点:不展示的DOM元素直接被移除。注意:v-if可以和:v-else-if、v-else一起使用,但要求结构不能被“打断”。2.v-show写法:v-show="表达式"适用于:切换频率较高的场景。特点:不展示的DOM元素未被移除,仅仅是使用样式隐藏掉3.备注:使用v-if的时,元素可能无法获取到,而使用v-show一定可以获取到。--><!-- 准备好一个容器 --><div id="root"><!-- 使用v-show做条件渲染 --><!-- <h2 v-show="false">欢迎来到{{name}}</h2> --><!-- <h2 v-show="1 === 3">欢迎来到{{name}}</h2> --><!-- <h2 v-show="a">欢迎来到{{name}}</h2> --><!-- 使用v-if做条件渲染 --><!-- <h2 v-if="false">欢迎来到{{name}}</h2> --><!-- <h2 v-if="1 === 3">欢迎来到{{name}}</h2> --><h2>当前的n值是:{{n}}</h2><button @click="n++">点我n+1</button><!-- <div v-show="n === 1">Angular</div><div v-show="n === 2">React</div><div v-show="n === 3">vue</div> --><!-- <div v-if="n === 1">Angular</div><div v-if="n === 2">React</div><div v-if="n === 3">vue</div> --><!-- v-else和v-else-if --><!-- <div v-if="n === 1">Angular</div><div v-else-if="n === 2">React</div><div v-else-if="n === 3">vue</div><div v-else>哈哈</div> --><!-- <h2 v-show="n === 1">你好</h2><h2 v-show="n === 1">小王</h2><h2 v-show="n === 1">魔仙堡</h2> --><!-- 上三行可写为如下,但会破坏结构 --><!-- <div v-show="n === 1"><h2>你好</h2><h2>小王</h2><h2>魔仙堡</h2></div> --><!-- 再进行改写,改为: --><!-- 注意:template只能和v-if搭配使用 --><template v-if="n === 1"><h2>你好</h2><h2>小王</h2><h2>魔仙堡</h2></template></div>
</body>
<script>Vue.config.productionTip = falseconst vm = new Vue({el:'#root',data:{name:'魔仙堡',// a:falsen:0}})
</script>
</html>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/92820.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

区块链3.0时代 基于GoMars构建的新概念TravelFi能否注入新力量?

区块链技术进入3.0时代 后疫情时代&#xff0c;全球数字化进程不断加快&#xff0c;世界范围内的移动通信、互联网技术及各类数字化应用的社会普及率也正在快速提升&#xff0c;疫情推动了互联网经济的增长&#xff0c;也让数字经济的价值开始显现。 数字经济一词的由来至今已经…

代码随想录 Day8 栈(FILO)与队列(FIFO) LeetCode T232 用栈实现队列 LeetCodeT225 用队列实现栈

题目详细思路来自于:代码随想录 (programmercarl.com) 栈和队列都是大家不陌生的数据结构,我们之前的栈和队列一般是用数组或链表来实现的 , 这里我们给出实现方式,用于帮助更好的理解. 1.用链表实现栈 /* 基于链表实现的栈 */ class LinkedListStack { private ListNode sta…

Vue3之Suspense

<Suspense> 是一个内置组件&#xff0c;用来在组件树中协调对异步依赖的处理。它让我们可以在组件树上层等待下层的多个嵌套异步依赖项解析完成&#xff0c;并可以在等待时渲染一个加载状态。 我们可以看到官网并不推荐我们使用它&#xff0c;目前仍处于测试中。 他用于加…

VUE2项目:尚品汇-axios二次封装请求以及VUEX的状态管理库

上一篇&#xff1a;VUE2项目&#xff1a;尚品汇VUE-CLI脚手架初始化项目以及路由组件分析&#xff08;一&#xff09; 目录 axios二次封装API接口管理与解决跨域API接口管理nprogress进度条配置 VUEX状态管理库三级分类动态背景颜色防抖三级联动跳转路由分析 axios二次封装 项…

windows系统查看exe程序的依赖dll并拷贝到指定路径下

脚本 echo off REM windows_copy_depends.bat是脚本文件名&#xff0c;exe_path是exe文件的全路径&#xff0c;dll_folder_path是脚本当前路径下的文件夹名称 REM 如windows_copy_depends.bat E:\git_code\windows_docker_desktop\winget.exe 123 echo Usage: windows_copy_dep…

Kafka收发消息核心参数详解

文章目录 1、从基础的客户端说起1.1、消息发送者主流程1.2、消息消费者主流程 2、从客户端属性来梳理客户端工作机制2.1、消费者分组消费机制 1、从基础的客户端说起 Kafka提供了非常简单的客户端API。只需要引入一个Maven依赖即可&#xff1a; <dependency><groupId…

《大师级引导-应对困境的工具与技术》读书笔记1

《大师级引导-应对困境的工具与技术》这个书&#xff0c;十分不错&#xff0c;教练和非教练都可以学习。下面是其中的关于冲突的处理&#xff1a; 定义&#xff1a;双方以解决冲突、说明关系为目的而进行的积极的、具有建设性的对话。 目的&#xff1a;制定双方协议&#xf…

《CTFshow-Web入门》10. Web 91~110

Web 入门 索引web91题解总结 web92题解总结 web93题解 web94题解 web95题解 web96题解 web97题解 web98题解 web99题解总结 web100题解 web101题解 web102题解 web103题解 web104题解 web105题解总结 web106题解 web107题解 web108题解 web109题解 web110题解 ctf - web入门 索…

锚框_的标定

一、查漏补缺、熟能生巧&#xff1a; 1.关于fix.axis.add_patch在原来图像的坐标系同添加 边框的函数的使用&#xff1a; 2.torch.arange( h , device)生成tensor的等差数组: 3.torch.T&#xff08;&#xff09;就是transpose转置操作的函数咯: 4.torch.repeat操作&#xff0c…

【Axure高保真原型】3D圆柱图_中继器版

今天和大家分享3D圆柱图_中继器版的原型模板&#xff0c;图表在中继器表格里填写具体的数据&#xff0c;调整坐标系后&#xff0c;就可以根据表格数据自动生成对应高度的圆柱图&#xff0c;鼠标移入时&#xff0c;可以查看对应圆柱体的数据……具体效果可以打开下方原型地址体验…

Springboot+vue的在线试题题库管理系统(有报告),Javaee项目,springboot vue前后端分离项目。

演示视频&#xff1a; Springbootvue的在线试题题库管理系统&#xff08;有报告&#xff09;&#xff0c;Javaee项目&#xff0c;springboot vue前后端分离项目。 项目介绍&#xff1a; 本文设计了一个基于Springbootvue的前后端分离的在线试题题库管理系统&#xff0c;采用M&…

javaSwing销售管理

​ 目录 一、选题背景 近几年来&#xff0c;传统商业与电商似乎是水火不容&#xff0c;大有不是你死便是我活的劲头。一直以来舆论都是一边倒的电商将迅速取代传统零售的论调&#xff0c;然而几年过去&#xff0c;电商的发展确实值得侧目&#xff0c;但传统商业虽然受到不小的…

性能压力测试的定义及步骤是什么

在今天的数字化时代&#xff0c;软件系统的性能和稳定性对于企业的成功至关重要。为了确保软件在高负载和压力情况下的正常运行&#xff0c;性能压力测试成为了不可或缺的环节。本文将介绍性能压力测试的定义、步骤。 一、性能压力测试的定义和目标 性能压力测试是通过模拟实际…

网络工程师学习中但是发现这个岗位非常卷怎么办

大家好&#xff0c;我是网络工程师成长日记实验室的郑老师&#xff0c;您现在正在查看的是网络工程师成长日记专栏&#xff0c;记录网络工程师日常生活的点点滴滴 有个同学说&#xff0c;他说现在有很多培训机构搞的这个网络工程师也非常卷。他现在还没有入行&#xff0c;他现在…

指定vscode黏贴图片路径(VSCode 1.79 更新)

指定vscode黏贴图片路径(VSCode 1.79 更新) 设置中搜索"markdown.copyFiles.destination" 点击AddItem,配置你的key-value&#xff0c;完成。

快排三种递归及其优化,非递归和三路划分

个人主页&#xff1a;Lei宝啊 愿所有美好如期而遇 目录 快排简介&#xff1a; 快排的三种递归实现&#xff1a; Hoare&#xff1a; 挖坑&#xff1a; 双指针&#xff1a; 小区间优化&#xff1a; 三数取中优化&#xff1a; 快排非递归实现&#xff1a; 快排的三路划…

基于PSO算法的功率角摆动曲线优化研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

【设计模式】五、原型模式

文章目录 概述示例传统的方式的优缺点原型模式原理结构图-uml 类图 原型模式解决克隆羊问题的应用实例Sheep类实现clone()运行原型模式在 Spring 框架中源码分析 深入讨论-浅拷贝和深拷贝浅拷贝的介绍 小结 概述 示例 克隆羊问题 现在有一只羊 tom&#xff0c;姓名为: tom, 年…

V4L2 驱动架构介绍

V4L2 简介 Video for Linux two(Video4Linux2)简称 V4L2&#xff0c;是 V4L 的改进版。V4L2 是 linux操作系统下用于视频和音频数据采集设备的驱动框架&#xff0c;为驱动和应用程序提供了一套统一的接口规范。 在 Linux 下&#xff0c;所有外设都被看成一种特殊的文件&#xf…

freertos简介与移植

freertos是一个可裁剪的小型rtos系统&#xff0c;特点&#xff1a; 支持抢占式&#xff0c;合作式和时间片调度saferos衍生自freertos&#xff0c;更完整提供了一个用于低功耗的tickless模式系统的组件在创建时可以选择动态或者静态的ram&#xff0c;例如任务&#xff0c;消息…