Vue 知识点：简单的切换

最新推荐文章于 2023-10-05 16:53:19 发布

阿夏呀

最新推荐文章于 2023-10-05 16:53:19 发布

阅读量807

点赞数 1

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/summer_cloudy/article/details/123063474

版权

Vue 三元表达式计算属性条件渲染数据绑定

关键词由CSDN通过智能技术生成

vue 专栏收录该内容

59 篇文章 1 订阅

订阅专栏

Vue 知识点：简单的切换

//三元表达式实现 
// a ? b : c   => ？之前是条件 b和c都是结果，条件为true时结果为b，false时为c
<div id="root">
     <h2>今天天气很{{isHot ？ ‘炎热’ ： ‘凉爽’}}</h2>
     <button @click="changeWeather">切换天气</button>
</div>

<script>
   new Vue({
       el:"#root",
       data:{
           isHot:true
       },
       methods:{
           changeWeather() {
               this.isHot = !this.isHot
           }
       }
   })
</script>

//计算属性实现
<div id="root">
     <h2>今天天气很{{info}}</h2>
     <button @click="changeWeather">切换天气</button>
</div>

<script>
   new Vue({
       el:"#root",
       data:{
           isHot:true
       },
       computed:{
          info() {
              return this.isHot ？ ‘炎热’ ： ‘凉爽’
          }
       },
       methods:{
           changeWeather() {
               this.isHot = !this.isHot
           }
       }
   })
</script>

//如果操作简单，也可以简写
<div id="root">
     <h2>今天天气很{{info}}</h2>
     <button @click="isHot ？!isHot">切换天气</button>
</div>

<script>
   new Vue({
       el:"#root",
       data:{
           isHot:true
       },
       computed:{
          info() {
              return this.isHot ？ ‘炎热’ ： ‘凉爽’
          }
       },
   })
</script>