vue3的基础入门03

最新推荐文章于 2023-04-22 17:30:00 发布

中年阿呆

最新推荐文章于 2023-04-22 17:30:00 发布

阅读量1.1k

点赞数 2

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

本文链接：https://blog.csdn.net/weixin_45808678/article/details/123496812

版权

本文介绍了Vue3中的计算属性和监视器（watch），包括在vue实例内部设置watch选项和使用$watch()方法。同时讲解了Vue实例的属性如$el、$data等，以及实例方法如$watch、$nextTick。最后讨论了模板（template）在页面结构构成中的作用。

摘要由CSDN通过智能技术生成

计算属性

<body>
      <div id="app">
          <p>{
  {msg}}</p>
          <!-- 对普通属性进行逻辑处理，然后再展示 -->
          <!-- <p>{
   { msg.toUpperCase().split(' ').reverse().join(' ')}}</p> -->
          <p>{
  { reverseMsg}}</p>
          <hr>
          <button @click="msg='hello world'">{
  {reverseMsg}}</button>
          <hr>
          <p>{
  {num}}</p>
          <p>{
  { doubleNum }}</p>
          <button @click=" doubleNum = 12">修改doubleNum</button>
</div>
</body>
<script>
        Vue.createApp({
            data(){//普通属性
                return {
                    msg:'welcom to vue',
                    num:4
                }
            },
            computed:{//计算属性
                reverseMsg:function(){//函数要有返回值，用来获取属性，称为get函数
                    return this.msg.toUpperCase().split(' ').reverse().join(' ')
                },
                doubleNum:{//同时指定get和set函数
                    get:function(){  //获取计算后的值
                        return this.num *2
                    },
                    set:function(val

最低0.47元/天解锁文章

中年阿呆

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
vue3的基础入门03

计算属性<body> <div id="app"> {{msg}}   {{ reverseMsg}
复制链接

扫一扫