Vue的计算属性

最新推荐文章于 2024-06-22 08:12:52 发布

AiDeMoLia

最新推荐文章于 2024-06-22 08:12:52 发布

阅读量69

点赞数

分类专栏： Vue基础文章标签： vue.js html5

本文链接：https://blog.csdn.net/AiDeMoLia/article/details/124957506

版权

Vue基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.computed的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>使用computed实现</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
            姓：<input type="text" v-model="fristName"/><br/><br/>
    
            名：<input type="text" v-model="listName"/><br/><br/>
            <span>{{fullName}}</span>
            </div>
            <script type="text/javascript">
                let vm=new Vue({
                    el:'#root',
                    data:{
                        fristName:"123",
                        listName:"456"
                    },
                   computed:{
                       fullName:{
                          get(){
                            return this.fristName+'-'+this.listName
                          },
                          set(Value){
                            const arr=Value.split('-')    //接收到修改的值进行拆分
                            this.fristName=arr[0]
                            this.listName=arr[1]
                          }
                        }
                   }
                
                })
            </script>
	</body>
</html>

AiDeMoLia

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue的计算属性

1.computed的使用<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>使用computed实现</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="r
复制链接

扫一扫