vue-cli的计算属性怎么写?

2025-12-26 21:53:46

1、第一步 在你的vue项目目录app.vue的模板写入表单

<template>

  <div id="app">

  

    

    <input type="text" v-model="myValue"/>

    {{myValue}}

  </div>

</template>

2、第二步  在app.vue的数据data写入绑定属性例如myValue

<script>

export default {

  

  

  data(){

  return {

  myValue:' '//此处写入绑定属性

  }

 }

}

</script>

3、第三步 在app.vue的模板中将表单绑定属性改写成计算属性的方法

<template>

  <div id="app">

  

    

    <input type="text" v-model="myValue"/>

    {{myValueWithOutNum}}

//表单绑定属性myValue改写成计算属性的方法myValueWithOutNum

  </div>

</template>

4、第四步 在<script></script>写入计算属性

<script>

export default {

  

  

  data(){

  return {

  myValue:' '

  }

 },

computed:{//此处写入计算属性的方法

  myValueWithOutNum(){

  return this.myValue.replace(/\d/g,' ')

  }

  }

}

</script>

5、补充代码部分

main.js部分:

import Vue from 'vue'

import App from './App'

new Vue({

  el: '#app',

  render:h => h(App)

})

index.html部分

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>selldemo</title>

  </head>

  <body>

    <div id="app">

   

    </div>

    

  </body>

</html>

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢