赞
踩
- <!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>
- <div id="root">
- 姓:<input type="text" v-model="firstName"><br><br>
- 名:<input type="text" v-model="lastName"><br><br>
- 姓名:<span>{{fullName}}</span>
- </div>
-
- <script>
- Vue.config.productionTip = false
-
- new Vue({
- el:'#root',
- data:{
- firstName:'张',
- lastName:'三'
- },
- computed:{
- fullName:{
- get(){
- return this.firstName + '-' + this.lastName
- },
- set(value){
- const arr = value.split('-')
- this.firstName = arr[0]
- this.lastName = arr[1]
- }
- }
- }
- })
- </script>
- </body>
- </html>
效果:
总结:
计算属性:
定义:要用的属性不存在,需要通过已有属性计算得来。
原理:底层借助了Objcet.defineproperty()方法提供的getter和setter。
get函数什么时候执行?
初次读取时会执行一次
当依赖的数据发生改变时会被再次调用
优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便
备注:
计算属性最终会出现在vm上,直接读取使用即可
如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变
如果计算属性确定不考虑修改,可以使用计算属性的简写形式
- new Vue({
- el:'#root',
- data:{
- firstName:'张',
- lastName:'三'
- },
- computed:{
- fullName(){
- return this.firstName + '-' + this.lastName
- }
- }
- })
- <!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>
- <div id="root">
- <h2>今天天气好{{info}}!</h2>
- <button @click="changeWeather">点击切换天气</button>
- </div>
-
- <script>
- Vue.config.productionTip = false
-
- new Vue({
- el:'#root',
- data:{
- isHot:true,
- },
- computed:{
- info(){
- return this.isHot ? '炎热' : '凉爽'
- }
- },
- methods:{
- changeWeather(){
- this.isHot = !this.isHot
- }
- },
- watch:{
- isHot:{
- immediate:true, //初始化时让handler调用一下
- //handler什么时候调用?当isHot发生改变时
- handler(newValue,oldValue){
- console.log('isHot被修改了',newValue,oldValue)
- }
- }
- }
- })
- </script>
- </body>
- </html>
监视属性watch:
vm.$watch
监视- vm.$watch('isHot',{
- immediate:true,
- handler(newValue,oldValue){
- console.log('isHot被修改了',newValue,oldValue)
- }
- })
- <!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>
- <div id="root">
- <h3>a的值是:{{numbers.a}}</h3>
- <button @click="numbers.a++">点我让a+1</button>
- <h3>b的值是:{{numbers.b}}</h3>
- <button @click="numbers.b++">点我让b+1</button>
- </div>
-
- <script>
- Vue.config.productionTip = false
-
- new Vue({
- el:'#root',
- data:{
- isHot:true,
- numbers:{
- a:1,
- b:1,
- }
- },
- watch:{
- //监视多级结构中所有属性的变化
- numbers:{
- deep:true,
- handler(){
- console.log('numbers改变了')
- }
- }
- //监视多级结构中某个属性的变化
- /* 'numbers.a':{
- handler(){
- console.log('a被改变了')
- }
- } */
- }
- })
- </script>
- </body>
- </html>
深度监视:
备注:
如果监视属性除了handler没有其他配置项的话,可以进行简写。
- <script type="text/javascript">
- Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
-
- const vm = new Vue({
- el:'#root',
- data:{
- isHot:true,
- },
- computed:{
- info(){
- return this.isHot ? '炎热' : '凉爽'
- }
- },
- methods: {
- changeWeather(){
- this.isHot = !this.isHot
- }
- },
- watch:{
- //正常写法
- isHot:{
- handler(newValue,oldValue){
- console.log('isHot被修改了',newValue,oldValue)
- }
- },
- //简写
- isHot(newValue,oldValue){
- console.log('isHot被修改了',newValue,oldValue,this)
- }
- }
- })
-
- //正常写法
- vm.$watch('isHot',{
- handler(newValue,oldValue){
- console.log('isHot被修改了',newValue,oldValue)
- }
- })
- //简写
- vm.$watch('isHot',function(newValue,oldValue){
- console.log('isHot被修改了',newValue,oldValue,this)
- })
- </script>
computed和watch之间的区别:
两个重要的小原则:
- <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>
- <div id="root">
- <!-- 绑定class样式--字符串写法,适用于:样式的类名不确定,需要动态指定 -->
- <div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br/><br/>
-
- <!-- 绑定class样式--数组写法,适用于:要绑定的样式个数不确定、名字也不确定 -->
- <div class="basic" :class="classArr">{{name}}</div> <br/><br/>
-
- <!-- 绑定class样式--对象写法,适用于:要绑定的样式个数确定、名字也确定,但要动态决定用不用 -->
- <div class="basic" :class="classObj">{{name}}</div> <br/><br/>
-
- <!-- 绑定style样式--对象写法 -->
- <div class="basic" :style="styleObj">{{name}}</div> <br/><br/>
-
- <!-- 绑定style样式--数组写法 -->
- <div class="basic" :style="styleArr">{{name}}</div>
- </div>
- <script type="text/javascript">
- Vue.config.productionTip = false
-
- const vm = new Vue({
- el:'#root',
- data:{
- name:'尚硅谷',
- mood:'normal',
- classArr:['atguigu1','atguigu2','atguigu3'],
- classObj:{
- atguigu1:false,
- atguigu2:false,
- },
- styleObj:{
- fontSize: '40px',
- color:'red',
- },
- styleObj2:{
- backgroundColor:'orange'
- },
- styleArr:[
- {
- fontSize: '40px',
- color:'blue',
- },
- {
- backgroundColor:'gray'
- }
- ]
- },
- methods: {
- changeMood(){
- const arr = ['happy','sad','normal']
- const index = Math.floor(Math.random()*3)
- this.mood = arr[index]
- }
- },
- })
- </script>
class样式:
写法:class="xxx",xxx可以是字符串、对象、数组
style样式:
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。