【尚硅谷 Vue学习】P18姓名案例 P19 计算属性 p20计算属性_简写 P21天气案例

文章目录

P18姓名案例
P19 计算属性
p20计算属性_简写
P21天气案例

前言：仅做笔记使用。不是制作精良的博客。

时间：2022/11/15

P18姓名案例

1.用插值的方式

<body>
  <!--准备好一个容器-->
  <div id="root">
    姓：<input type="text" v-model="firstName"><br/><br/>
    名：<input type="text" v-model="lastName"><br/><br/>
          <!--缺点：{{}}里面会太繁琐-->
    姓名:<span>{{firstName.slice(0,3)}} {{lastName}}</span>
  </div>


  <script type="text/javascript">
    Vue.config.productionTip=false;
    new Vue({
      el:'#root',
      data:{
        firstName:'',
        lastName:''
      }
    })
  </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

上面的代码违反Vue的一个原则：简单表达式

好例子：

2.用方法的方式

fullName();返回一个返回值

fullName()
{
    return this.fistName+'-'+this.lastName
}
1
2
3
4

但是会调用很多次。

P19 计算属性

什么是属性？

data里面的就是属性，红色的是属性名，==：==后面的是属性值。

根据原有属性进行计算得到的全新属性就是计算属性

Vue里面属性与计算属性分开放。

计算属性：computed

fullName（计算属性）也在vm身上。

fullName是个对象

<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 type="text/javascript">
    Vue.config.productionTip=false;
    new Vue({
      el:'#root',
      data:{
        firstName:'',
        lastName:''
      },
      computed:{
        fullName:{
          //get有什么作用？
          //当有人读取fullName时，get就会被调用，且返回值就作为fullName值
          //get什么时候被调用？
          //1.初次读取fullName时，2.所依赖的数据（x+y=z,x跟y就是依赖的数据）发生变化时、
          get(){
            alert('get被调用')
            return this.firstName+' '+this.lastName
          }
        }
      }

    })
  </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

set:

          //set什么时候调用？当fullName被修改时
          set(value){
            const arr=value.split('-')
            this.firstName=arr[0]
            this.lastName=arr[1]
          }
1
2
3
4
5
6

总结：

p20计算属性_简写

只有考虑读取不考虑修改的时候

      computed:{
        //简写
        fullName(){
          console.log('get被调用了')
          return this.firstName+'-'+this.lastName
        }
      }
1
2
3
4
5
6
7

P21天气案例

Vue的好用插件:

Vue语法补全

天气案例：

不咋样的版本：

<body>
  <!--准备好一个容器-->
  <div id="root">
    <h2>今天天气很 {{isHot?'炎热':'凉爽'}}</h2>
    <button>切换天气</button>
  </div>


  <script type="text/javascript">
    Vue.config.productionTip=false;
    new Vue({
      el:'#root',
      data:{
        isHot:true
      }
    })
  </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

进阶一下：

<body>
  <!--准备好一个容器-->
  <div id="root">
    <h2>今天天气很 {{info}}</h2>
    <button @click="changeWeather">切换天气</button>
  </div>


  <script type="text/javascript">
    Vue.config.productionTip=false;
    new Vue({
      el:'#root',
      data:{
        isHot:true
      },
      computed:{
        info(){
          return this.isHot?'炎热':'凉爽'
        }
      },
      methods: {
        changeWeather(){
          this.isHot=!this.isHot
        }
      },
    })
  </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

不写methods:

简单语句

相关阅读:
基于点标签的目标检测与计数深度学习框架盘点
Markdown基本语法
04-JS函数
算法试题——每日一练
一文让你彻底了解Linux内核文件系统(大总结)
Evil.js(罪恶的) —— 代码
Servlet之Request&Reponse 学习笔记
HashMap面试题
对象密封的四种方式 Object.is Object.assign
ZStack CEO 张鑫：让云计算在未来无人提及，又无处不在！

原文地址：https://blog.csdn.net/m0_54381284/article/details/127863826