computed计算属性说明:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<!-- <SCRIPT type="text/javascript" src="vue.js"></SCRIPT> -->
<script src="vue.js"></script>
<body>
<div id="root">
姓：<input type="text" v-model:value="sex"><br><br>
名：<input type="text" v-model:value="name">
<h4>您输入的完整姓名是：</h4>
<h4>1.正常写法：{{sex}}-{{name}}</h5>
<h4>2.methods事件写法：{{fullName()}}</h5>
<h3>3.computed计算写法：{{fullName_run}}</h5>
<h3>4.computed计算简单类函数写法：{{fullName_easy}}</h5>
</div>
</body>
<script type="text/javascript">
var root = new Vue({
// var root=new Vue({
el: '#root',
data: {
sex: "张",
name: "三"
},
methods: {
fullName() {
return this.sex + "-" + this.name;
}
},
computed: {
fullName_run: {
get() {
return this.sex + "_" + this.name;
}
},
fullName_easy() {
return this.sex + "_" + this.name;
}
},
})
</script>
</html>
