vue计算属性computed、事件、监听器watch的使用讲解-创新互联

一.计算属性（computed）

白塔网站制作公司哪家好，找创新互联建站！从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设公司等网站项目制作，到程序开发，运营维护。创新互联建站于2013年开始到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联建站。

<template>
  <div class="box">
    <h2>计算属性</h2>
    <hr>
    <!-- 直接渲染得到数据 -->
    <p><input type="text" v-model="message"></p>
    <!-- 对data的数据进行简单的操作
    这样有一个不好的地方就是后期对页面数据的维护不是那么方便 -->
    <p>{{message.toUpperCase()}}</p>
    <!-- 通过计算属性改变mesage进行渲染 -->
    <p>{{computedMessage}}</p>
    <hr>
    <!-- 通过事件来改变属性 -->
    <span>{{message}}</span><button @click="changeMessage()">点击改变</button>
    <hr>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello world!',
      passw2: 'sss',
    }
  },
  // computed属性是return返回值，在使用的时候只使用函数名不是调用函数
  computed:{
    computedMessage(){
      return this.message.split('')
    }
  },
  methods:{
    changeMessage(){
      this.message = this.computedMessage+'altman'
    }
  },
}
</script>

文章题目：vue计算属性computed、事件、监听器watch的使用讲解-创新互联
标题网址：https://www.cdcxhl.com/article6/deeoig.html

成都网站建设公司_创新互联，为您提供外贸建站、建站公司、品牌网站建设、品牌网站制作、自适应网站、移动网站建设

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联