Vue基础教程：插值、指令与计算属性-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_67476502/article/details/124426482

本文详细介绍了Vue的基础语法，包括插值的文本、HTML、属性和表达式用法，指令如v-if、v-else、v-for、v-bind的参数和简写，以及过滤器和计算属性的使用。同时，提到了数据双向绑定v-model和监听属性watch的概念。

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

1.1 插值

1.1.4 表达式

完整代码

1.2 指令（指的是带有“v-”前缀的特殊属性）

1）v-model:数据双向绑定
2）v-bind：绑定标签属性值，例如：v-bind:class/v-bind:id
3）{{}}:插值，针对标签中文本值进行插入操作

1.1 插值

1.1.1 文本
{{msg}}
1.1.2 html
使用v-html指令用于输出html代码

1.1.3 属性
HTML属性中的值应使用v-bind指令

错误：报错，不变色

正确：变色

1.1.4 表达式

Vue提供了完全的JavaScript表达式支持
{{str.substr(0,6).toUpperCase()}}：截取0-6，转成大写
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
<li v-bind:id="'list-' + id">我的Id是js动态生成的</li>：接list+后面id的值

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- CDN -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<style>
		.cl{
			color: aqua;
		}
	</style>
	<body>
		<!-- 定义管理边界 -->
		<div id="app">
			<h1>{{ts}}</h1>
			<h2>1，插值</h2>
			<ol>
				<li>文本</li>
				<span>
					{{msg}}
				</span>
				<li>html</li>
				<span v-html="html"></span>
				<li>v-bind绑值</li>
				<!-- 
				1）v-model:数据双向绑定
				2）v-bind：绑定标签属性值，例如：v-bind:class/v-bind:id
				3）{{}}:插值，针对标签中文本值进行插入操作
				 -->
				<span v-bind:class="cls">
					新游记真好看！！
				</span>
				<li>表达式</li>
				{{msg.substr(0,6).toUpperCase()}}
				{{ number + 1 }}
				{{ ok ? 'YES' : 'NO' }}
				<li v-bind:id="'list-' + id">我的Id是js动态生成的</li>

			</ol>
		</div>
	</body>
	<script>
	   var vm=new Vue({
		   el:'#app',
		   data:{
			   ts:new Date().getTime(),
			   msg:'hello vue!!!',
			   html:'<input type="text" value="2"/>',
			   cls:'cl',
			   number:10,
			   ok:true,
			   id:101
		   },
		   methods:{
			   
		   }
	   });
	</script>
</html>

1.2 指令（指的是带有“v-”前缀的特殊属性）

v-if 、 v-else、 v-else-if

v-else-if上一个兄弟元素必须是v-if
v-else上一个兄弟元素必须是v-if或者是v-else-if

v-show和v-model

v-show：与v-if类似，只是会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码：style="display:none"，相当于隐藏

打勾显示，不打勾不显示

v-for/v-model/v-bind/{{}}

下拉框

多选框

获取到id

第四种方法

第五种

参数，动态参数及简写

方法二

v-bind:简写变成: 例如：v-bind:id -> :id
v-on:简写变成@ 例如：v-on:click -> @click

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- CDN -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<style>
		.cl{
			color: aqua;
		}
	</style>
	<body>
		<!-- 定义管理边界 -->
		<div id="app" style="margin-bottom: 200px ;">
			<h1>{{ts}}</h1>
			<h2>指令</h2>
			<ol>
				<li>v-if|v-else|v-else-if</li>
				<span v-if="sex=='boy'">
					你算是个男的
				</span>
				<span v-else-if="sex=='girl'">
					你是个女汉子
				</span>
				<span v-else>
					不男不女
				</span>
				<li>v-show和v-model</li>
				<div>
					<input type="checkbox" v-model="flag" />已阅读该协议
					<div v-show="flag">
						君不见
					</div>
				</div>
				<li>v-for/v-model/v-bind/{{}}</li>
				<div v-for="(d,i) in arrays">
					i={{i}},d={{d}}
				</div>
				<!-- <div>
					<select>
						<option value="">---请选择---</option>
						<option v-for="d in depts" v-bind:value="d.id">
							{{d.name}}
						</option>
					</select>
				</div> -->
				<!-- <span v-for="s in depts">
					<input type="checkbox" v-bind:value="s.id" v-model="rs" />
					{{s.name}}
				</span>
				<span v-if="rs.length!=0">
					{{rs}}
				</span> -->
				<li>参数，动态参数及简写</li>
				<span>
					<!-- <a v-bind:[attrname]="url">搜狗</a><br />
					<a v-on:[eventname]="doClick">点我</a> -->
					<!-- 简写 -->
					<!-- 
					v-bind:简写变成:  例如：v-bind:id -> :id
					v-on:简写变成@    例如：v-on:click -> @click
					 -->
					<a :href="url">搜狗</a><br />
					<a @click="doClick">点我</a>
				</span>
			</ol>
		</div>
	</body>
	<script>
	   var vm=new Vue({
		   el:'#app',
		   data:{
			   ts:new Date().getTime(),
			   sex:'boy',
			   flag:false,
			   depts:[
				   {id:1,name:'研发部'},
				   {id:2,name:'市场部'},
				   {id:3,name:'客户部'},
				   {id:4,name:'人事部'}
			   ],
			   arrays:[1,2,3,4],
			   rs:[],
			   url:'https://123.sogou.com',
			   attrname:'href',
			   eventname:'dblclick'
			   
		   },
		   methods:{
			   doClick(){
				   alert(123);
			   }
		   }
	   });
	</script>
</html>

过滤器（全局和局部）

v 是将要过滤的字段

局部过滤器

全局过滤器（导一个date.js）

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- CDN -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<script src="js/date.js"></script>
	</head>
	<body>
		<!-- 定义管理边界 -->
		<div id="app" style="margin-bottom: 200px ;">
			<h1>{{ts}}</h1>
			<h2>过滤器（全局和局部）</h2>
			<div>
				<!-- 局部过滤器 -->
				{{title|strFilter}}<br />
				<!-- 全局过滤器 -->
				{{dt|dateFilter|strFilter}}
			</div>
			</ol>
		</div>
	</body>
	<script>
	   //全局过滤器
		Vue.filter('dateFilter',function(v){
			/* return fmtDate(v); */
			return fmtDate(v,'yyyy年MM月dd日');
		});
		
		//每一个Vue实例都是从new构造函数开始
	   var vm=new Vue({
		   el:'#app',
		   data:{
			   ts:new Date().getTime(),
			   title:'hello vue!!',
			   dt:new Date()
		   },
		   methods:{
			
		  },
			 filters:{
				 strFilter:function(v){
					 return v.substr(0,6).toUpperCase();
				 }
			 }
			   
	   });
	</script>
</html>

计算属性

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- CDN -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<script src="js/date.js"></script>
	</head>
	<body>
		<!-- 定义管理边界 -->
		<div id="app" style="margin-bottom: 200px ;">
			<h1>{{ts}}</h1>
			<h2>计算属性</h2>
			<div v-for="s in score">
				编号={{s.id}},科目={{s.name}},成绩={{s.sc}}
			</div>
			<span>总分：{{sum}}</span>
			</ol>
		</div>
	</body>
	<script>
		//每一个Vue实例都是从new构造函数开始
	   var vm=new Vue({
		   el:'#app',
		   data:{
			   ts:new Date().getTime(),
			   score:[
				   {id:1,name:'语文',sc:110},
				   {id:2,name:'数学',sc:90},
				   {id:3,name:'英语',sc:90},
				   {id:4,name:'文科',sc:210}
			   ]
		   },
		   methods:{
			
		  },
		  computed:{
			  sum:function(){
				  let s=0;
				  //面试题：let和var的区别？
				  //let是局部变量定义
				  //var是全局变量定义，容易产生数据干扰或者是污染
				  for(let sc of this.score)
				  s+=sc.sc;
				  return s;
			  }
		  }
	   });
	</script>
</html>

监听属性

watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象

computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- CDN -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<!-- 定义管理边界 -->
		<div id="app" style="margin-bottom: 200px ;">
			<h1>{{ts}}</h1>
			<h2>监听属性</h2>
			kb:<input type="text" v-model="kb" /><br />
			mb:<input type="text" v-model="mb" /><br />
	</body>
	<script>
		//每一个Vue实例都是从new构造函数开始
	   var vm=new Vue({
		   el:'#app',
		   data:{
			   ts:new Date().getTime(),
			   kb:1024,
			   mb:1
		   },
		   methods:{
		  },
		  watch:{
			  //监听属性必须保证属性是存在的！！！
			  kb:function(v){
				  this.mb=v/1024;
			  },
			  mb:function(v){
				  this.kb=v*1024;
			  }
		  }
	   });
	</script>
</html>