Vue的数据绑定和计算属性_v-model绑定计算属性-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_42839746/article/details/123968742

本文介绍了Vue.js的MVVM架构模式，重点讲解了Vue的双向数据绑定，通过v-model指令实现文本框的实时同步，以及Vue模板语法中的文本、HTML插值和表达式。此外，还深入探讨了计算属性computed的使用，对比了它与methods的区别，强调了computed的缓存特性对于提高代码效率的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、概述

Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于 View 层。它的核心是 MVVM 中的 ViewModel。

1、MVVM是一种基于前端开发的架构模式，其核心是提供了双向数据绑定。

2、ViewModel （vue实例）负责连接 View（视图）和 Model（数据），保证视图和数据的一致性。

二、Vue双向数据绑定

1、使用 v-model 绑定文本框

<div id="app">
<P>{{number}}</P>
<input type="number" name="" v-model="number">  <!--  V-model : 它负责把用户输入到表单中的数据绑定到Vue的data  -->
</div>

2、实例化Vue对象并写入我的代码

<script type="text/javascript"> 
	//vm:viewmodel,当作new Vue对象
	//m:model,当做data
	//v:view视图，div#app
	//双向数据绑定：view和model是在viewmodel作用下绑定在一起
	new Vue({
		el:"#app",
		data:{
			number:"20",
		}
	})
</script>

当鼠标点击文本框里面的按钮来改变数字时，上面的数字总是和文本框里面的数字保持一致

三、Vue模板语法

1、Vue.js 用模板语法 {{ }} 声明式将数据渲染进 DOM 系统，允许将DOM绑定Vue实例中的data数据，称为“插值”

①文本插值示例，Vue 支持动态渲染文本，以 {{ }} 形式插入，输出纯文本。

<!DOCTYPE html>
<html>
<head>
	<title>vue文本插值</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>
	<div id="app"><P>{{name}}</P></div>
</body>
<script type="text/javascript">
	new Vue({
		el:"#app",
		data:{
			name:'卖核能的阿呦',
		}
	})
</script>
</html>

②HTML插值，Vue 支持渲染 HTML代码，但需要使用 v-html 指令。

<!DOCTYPE html>
<html>
<head>
	<title>vue文本插值</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>
	<div id="app">
		<div v-html="message"></div>
	</div>
<script type="text/javascript">
	new Vue({
		el:'#app',
		data:{
			message: '用户名<input type="text" value="中文名"/>'
			+'密码<input type="password"/>'
			//这里不支持换行，如果要换行用单引号括起来用+号连接。
		}
	})
</script>
</body>
</html>

③表达式示例，Vue 支持 JavaScript 的所有表达式。

{{ number + 1 }} 
{{ ok ? 'YES' : 'NO' }} 
{{ message.split('').reverse().join('') }} 
<div v-bind:id="'list-' + id"></div>

四、Vue计算属性

1、模板语法内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护，因此Vue提供了计算属性computed。

<!DOCTYPE html>
<html>
<head>
	<title>vue计算属性</title>
	<meta charset="utf-8">
	<script src="lib/vue.js"></script>
</head>
<body><div id="app">
    	<h2>图书</h2>
    	<p>你购买{{bookname}}书籍，共{{count}}本，每本{{price}}￥</p>
    	<p>折扣：{{discount}}</p>
    	<p>运费：{{deliver}}</p>
    	<p>总价：{{totalprice}}</p>
    </div>
</body>
  <script type="text/javascript">
  	new Vue({
  		el:"#app",
  		data:{
          bookname:"《vue从入门到放弃》",
          count:10,
          price:30,
          discount:0.8,
          deliver:8
  		},
  		computed:{
  			//计算总价
  			totalprice(){
  				return(this.price*this.count*this.discount+this.deliver)
  			}
  		}
  	})
  </script>
</html>

2、methods

<!DOCTYPE html>
<html>
<head>
	<title>vue计算属性</title>
	<meta charset="utf-8">
	<script src="lib/vue.js"></script>
</head>
<body><div id="app">
    	<h2>图书</h2>
    	<p>你购买{{bookname}}书籍，共{{count}}本，每本{{price}}￥</p>
    	<p>折扣：{{discount}}</p>
    	<p>运费：{{deliver}}</p>
    	<p>总价：{{totalprice()}}</p><!--用 methods 方法编写的逻辑运算，在调用时 add() 一定要加“()”-->
    </div>
</body>
  <script type="text/javascript">
  	new Vue({
  		el:"#app",
  		data:{
          bookname:"《vue从入门到放弃》",
          count:10,
          price:30,
          discount:0.8,
          deliver:8
  		},
  		methods:{
  			//计算总价
  			totalprice(){
  				return(this.price*this.count*this.discount+this.deliver)
  			}
  		}
  	})
  </script>
</html>

3、computed和methods区别

①computed：当计算结果不变时，该函数仅会调用一次，这是computed的缓存功能，合理使用会大大提高代码的运行速度。
②methods：页面刚加载时调用一次，后期只有被调用时才会执行。因为methods没有缓存功能，而且调用的时候需要加括号，这样与computed的不同点。