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

最新推荐文章于 2024-07-23 15:40:17 发布

潮.eth

最新推荐文章于 2024-07-23 15:40:17 发布

阅读量125

点赞数 3

分类专栏： # Vue 文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/m0_54381284/article/details/127863826

版权

Vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章目录

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>

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

好例子：

2.用方法的方式

fullName();返回一个返回值

fullName()
{
    return this.fistName+'-'+this.lastName
}

但是会调用很多次。

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>

set:

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

总结：

p20计算属性_简写

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

      computed:{
        //简写
        fullName(){
          console.log('get被调用了')
          return this.firstName+'-'+this.lastName
        }
      }

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>

进阶一下：

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