vue-cli的计算属性怎么写?
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>