Vue中的计算属性

最新推荐文章于 2024-05-17 14:32:46 发布

终会为一

最新推荐文章于 2024-05-17 14:32:46 发布

阅读量576

点赞数 16

分类专栏： vue.0+vue3.0全套学习目录文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_73992463/article/details/135045865

版权

vue.0+vue3.0全套学习目录专栏收录该内容

30 篇文章 2 订阅

订阅专栏

天气案例：简单实现

<body>
  <!-- 准备好一个盒子 -->
  <div id="root">
    <h2>今天天气很{{isHot ? '热' : '凉爽'}}</h2>
    <button>切换天气</button>
  </div>
</body>
<script type="text/javascript">
  Vue.config.productionTip = true
  new Vue({
    el:'#root',
    data:{
      isHot:true
    }
  })
</script>

天气案例二：

<body>
  <!-- 准备好一个盒子 -->
  <div id="root">
    <h2>今天天气很{{info}}</h2>
    <button @click="changWeather">切换天气</button>
  </div>
</body>
<script type="text/javascript">
  Vue.config.productionTip = true
  new Vue({
    el:'#root',
    data:{
      isHot:true
    },
    computed:{
      info(){
        return this.isHot ? '阳热' :'凉爽'
      }
    },
    methods:{
      changWeather(){
        this.isHot = !this.isHot
      }
    }
  })
</script>

天气案例三（简写）：

<body>
  <!-- 准备好一个盒子 -->
  <div id="root">
    <h2>今天天气很{{info}}</h2>
    <button @click="isHot = !isHot">切换天气</button>
  </div>
</body>
<script type="text/javascript">
  Vue.config.productionTip = true
  new Vue({
    el:'#root',
    data:{
      isHot:true
    },
    computed:{
      info(){
        return this.isHot ? '阳热' :'凉爽'
      }
    },
    methods:{
      // changWeather(){
      //   this.isHot = !this.isHot
      // }
    }
  })
</script>

天气案例4（总结）：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>天气案例</title>
  <!-- 引入vue -->
  <script src="../js/vue.js" type="text/javascript"></script>
</head>

<body>
  <!-- 准备好一个盒子 -->
  <div id="root">
    <h2>今天天气很{{info}},{{x}}</h2>
    <!--绑定事件的事件时侯 @xxx='yyy'yyy可以写一些语句 -->
    <button @click="isHot = !isHot;x++">切换天气</button>
  </div>
</body>
<script type="text/javascript">
  Vue.config.productionTip = true
  new Vue({
    el:'#root',
    data:{
      isHot:true,
      x:1
    },
    computed:{
      info(){
        return this.isHot ? '阳热' :'凉爽'
      }
    },
    methods:{
      // changWeather(){
      //   this.isHot = !this.isHot
      //   this.x++
      // }
    }
  })
</script>

</html>