vue3基础语法(二)

一.计算属性

在vue3中计算属性在computed中定义,下面是具体例子

xml 复制代码
<template>
    <p>结果是{{result}}</p>
</template>

<script>
export default {
  name: "computed",
  data(){
    return {
      number1:10,
      number2:20
    }
  },
  computed:{
    result(){ 
      return this.number1+this.number2
    }
  }
}
</script>

<style scoped>

</style>

他其实类似于你定义好一个计算方法然后调用的时候会运行,但是既然两者如此相似,那么计算属性存在的意义又是什么呢。 其实,计算属性会缓存响应数据,大概意思就是,你的number1或者number2没有发生改变的话,他就不会重新计算,而如果是方法的话,那么每次调用都会重新计算,也就是性能方面的影响

二.class属性绑定 我们经常可以针对class属性是否显示,增加判断值,或者多属性绑定,我们来看看

xml 复制代码
<template>
  <p :class="{'active':isactive,'text-danger':haserror}">class的样式绑定</p>
  <p :class="classObject">class的样式绑定2</p>
  <p :class="[arractive,arrhaserror]">class的样式绑定3</p>
</template>

<script>
export default {
  name: "Classdemo",
  data() {
    return {
      isactive: true,
      haserror: true,
      arractive:'active',
      arrhaserror:'text-danger'
    }
  },
  computed: {
    classObject() {
      return {
        'active': this.isactive,
        'text-danger': this.haserror,
      };
    },
  },


}
</script>

<style scoped>
.active {
  font-size: 45px;
}

.text-danger {
  color: red;
}
</style>

这里的例子有三种样式绑定方法,我也分别用了基础方法,计算属性方法,列表进行绑定,前后两个知识点也联系起来。 三.style绑定对象

xml 复制代码
<template>
<p :style='{color:activecolor,fontSize:"30px"}'>style绑定1</p>
<p :style='styleobject'>style绑定2</p>
</template>

<script>
export default {
  name: "styledemo",
  data(){
    return {
      activecolor:"green",
      styleobject:{
        color:'red',
        fontSize:"30px"
      }
    }
  }
}
</script>

<style scoped>

</style>

类似于class绑定,不多说了

四.侦听器(watch) 侦听器的可以用来侦测响应式数据的变化

xml 复制代码
<template>
  <p>{{ message }}</p>
  <button @click="updatamsg">修改数据</button>
</template>

<script>
export default {
  name: "watchdemo",
  data() {
    return {
      message: '我在学vue'
    }
  },
  methods: {
    updatamsg() {
      this.message = '我在学vue3,不学vue2了'
    }
  },
  // 这里的函数名必须要和侦听的数据名称一致,
  //newvalue代表新的数据
  //oldvalue代表旧的数据
  watch:{
    message(newvalue,oldvalue){
      console.log(newvalue,oldvalue)
    }
  }

}
</script>

<style scoped>

</style>

当然这里的newvalue,oldvalue可以用任意参数表示

五.模板引用

这个名字比较抽象,你可以理解为是对Dom元素的操作

xml 复制代码
<template>
  <div>
    <p ref="container" class="container">{{ content }}</p>
    <button @click="editdom">点点看</button>
    <div></div>
    <input type="text" ref="username">
    <p>{{ usernameValue }}</p>
  </div>
</template>

<script>
export default {
  name: "domdemo",
  data() {
    return {
      content: "内容",
      usernameValue: "",
    };
  },
  methods: {
    editdom() {
      this.$refs.container.innerText = '我爱学vue3';
      this.usernameValue = this.$refs.username.value;
    },
  },
};
</script>

<style scoped>
/* 样式 */
</style>

主要是通过ref来连接双方,你可以对dom进行操作,但是说实话,这个功能用的应该不多,而且性能消耗较高,一般没有必要用这个功能,这里放这里作为参考

相关推荐
brzhang2 分钟前
Node 服务遇到血崩,汤过坑才知道,限流与熔断是你绕不过的坑
前端·后端·架构
Moment3 分钟前
NestJS 在 2025 年:对于后端开发者仍然值得吗 ❓︎❓︎❓︎
前端·javascript·后端
Jolyne_7 分钟前
一些我推荐的前端代码写法
前端
赵小川33 分钟前
Taro 包升级实录 — 从 3.3 到 3.6.3 完整指南
前端·架构
_志哥_43 分钟前
解除有些网站不能复制的终极办法
前端·chrome
愚昧之山绝望之谷开悟之坡1 小时前
什么是uv和传统的区别
前端·chrome·uv
SRC_BLUE_171 小时前
NSSCTF - Web | 【第五空间 2021】pklovecloud
android·前端
golang学习记1 小时前
从0死磕全栈之Next.js 数据安全实战指南:从零信任到安全架构
前端
云中雾丽1 小时前
flutter中 getx 的使用
前端
Jay丶1 小时前
聊聊入职新公司两个月,试用期没过这件事
前端·面试