您的位置：首页 > 产品设计 > UI/UE

Vue之计算属性

2017-09-24 15:26 375 查看
计算属性:computed

1.简单的计算

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>

</style>
<script src="vue.js"></script>
<script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>

</style>
<script src="vue.js"></script>
<script>

</script>
</head>
<body>
<div id="box">
a => {{a}}
<br>
b => {{b}}
</div>
<script>
var vm=new Vue({
el:'#box',
data:{
a:1
},
computed:{
b:function(){
//业务逻辑代码
return this.a+1;
}
}
});

document.onclick=function(){
vm.a=101;
};
</script>
</body>
</html>


<script> var vm=new Vue({ el:'#box', data:{ a:1 }, computed:{ b:function(){ //业务逻辑代码 return 2; } } }); console.log(vm.a); </script></body></html>



效果:



2.点击事件完成计算

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>

</style>
<script src="vue.js"></script>
<script>

</script>
</head>
<body>
<div id="box">
a => {{a}}
<br>
b => {{b}}
</div>
<script>
var vm=new Vue({
el:'#box',
data:{
a:1
},
computed:{
b:function(){
//业务逻辑代码
return this.a+1;
}
}
});

document.onclick=function(){
vm.a=101;
};
</script>
</body>
</html>


初始状态：



点击完



3.计算属性默认有set和get属性

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>

</style>
<script src="vue.js"></script>
<script>

</script>
</head>
<body>
<div id="box">
a => {{a}}
<br>
b => {{b}}
</div>
<script>
var vm=new Vue({
el:'#box',
data:{
a:1
},
computed:{
b:{
get:function(){
return this.a+2;
},
set:function(val){
this.a=val;
}
}
}
});

document.onclick=function(){
vm.b=10;
};
</script>
</body>
</html>


初始：



点击完


                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航