Vue进阶(指令、过滤器、监听属性、计算属性)

最新推荐文章于 2024-06-13 23:47:14 发布

湘M

最新推荐文章于 2024-06-13 23:47:14 发布

阅读量50

点赞数

分类专栏：前端 vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_57406300/article/details/131794948

版权

前端同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

vue

2 篇文章 0 订阅

订阅专栏

进阶使用Vue

1.指令

v-html  //html文本转义将数据转化成html格式

v-blind //vue的属性是html属性可以解析从获取的数据集

代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p>插值</p>
			{{msg}}
			<p>html文本转义</p>
			<div v-html="msg"></div>
			
			<p>vue的属性</p>
			<input type="" value="msg"><br>
			<input type="" v-bind:value="msg"><br>
			<input type="" :value="msg"><br>
			
			<p>vue中的js支持</p>
			{{str}} <br />
			{{str.substring(0,5)}}<br />
			<!-- 支持算数 -->
			{{num+1}}<br />
			<!-- 支持三目运算符 -->
			{{flag ? 'ok':'fail'}}
			
			<span :id="'stu_'+id">
				这是第一百个学生
			</span>
		</div>
		
		<script>
			
			new Vue({
				el:'#app',
				data(){
					return{
						msg:'<span style="color:red">hello vue.js</span>',
						str:'hello vue.js',
						num:6,
						flag:true,
						id:100
					}
				}
			})
			
		</script>
	</body>
</html>

v-if | v-else-if :根据其后表达式的bool值进行判断是否渲染该元素
v-show：真实存在但被css样式隐藏在判断为真时显示
v-for :进行循环
v-bind：对属性进行赋值操作
v-on ：添加事件
v-model：数据双向绑定

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		
	</head>
	
	<body>
		<div id="app">
			<p>v-if/v-else-if/v-else</p>
			
			<input v-model="score">
			<span v-if="score>90">优秀</span>
			<span v-else-if="score>80">良好</span>
			<span v-else-if="score>70">中等</span>
			<span v-else-if="score>60">及格</span>
			<span v-else="">不及格</span>
			
			<span v-if="score>100">不存在</span>
			
			<p>v-show</p>
			<span v-show="score>100">不存在</span>
			<!-- v-if与v-show的区别？
			v-if是真的不存在，而v-show是存在但是被css样式隐藏了 -->
			
			<p>v-for</p>
			<div v-for="n in arr">
				{{n}}<br />
			</div>
			<div v-for="n in likes">
				{{n.id}}--{{n.name}}<br />
			</div>
			
			<p>v-on</p>
			
			<button type="button" v-on:click="do_spa">点我</button>
			
			<input v-model="envname"><br />
			<button type="button" v-on:[envname]="do_spa">魔法按钮</button>
			
		</div>
		
		<script>
			
			new Vue({
				el:'#app',
				data(){
					return{
						score:90,
						arr:['唱','跳','rappe'],
						likes:[
							{id:1,name:'洗脚'},
							{id:2,name:'sing'},
							{id:3,name:'head'}
							],
							envname:'click'
					}
				},
				methods:{
						
					do_spa(){
						alert("spa")
					}
				}
				
				
				
			})
			
		</script>
	</body>
</html>

3.过滤器

概要

一个 Vue.js 的过滤器本质上是一个函数，这个函数会接收一个值，将其处理并返回。过滤器在指令中由一个管道符 (|) 标记，并可以跟随一个或多个参数：

示例
过滤器必须放置在一个指令的值的最后：

<span v-text="message | capitalize"></span>

你也可以用在 mustache 风格的绑定的内部：

<span>{{message | uppercase}}</span>

可以串联多个过滤器：

<span>{{message | lowercase | reverse}}</span>

参数
一些过滤器是可以接受参数的。参数用空格分隔开：

<span>{{order | pluralize 'st' 'nd' 'rd' 'th'}}</span>

<input v-on="keyup: submitForm | key 'enter'">

纯字符串参数需要用引号包裹。无引号的参数会作为表达式在当前数据作用域内动态计算。在后面讲到自定义过滤器时，我们进一步讨论这些细节。

上述示例的具体用法参见完整的内建过滤器列表。

代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		
	</head>
	
	<body>
		<div id="app">
			<p>基本过滤器</p>
			{{str|filterA}}
			<p>过滤器传参</p>
			{{str|filterB(0,8)}}
			
			<p>过滤器串</p>
			{{str|filterA|filterB(0,2)}}
			
		</div>
		
		<script>
			
			new Vue({
				el:'#app',
				filters:{
					filterA:function(v){
						return v.substring(0,3);
					},
					filterB:function(v,start,end){
						return v.substring(start,end)
					}
				},
				data(){
					return{
						str:'hello vue.js'
						
					}
				}			
				
			})
			
		</script>
	</body>
</html>

4.监听属性、计算属性

计算属性computed :

支持缓存，只有依赖数据发生改变，才会重新进行计算
不支持异步，当computed内有异步操作时无效，无法监听数据的变化
computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed
如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。

监听属性watch：

不支持缓存，数据变，直接会触发相应的操作；
watch支持异步；
监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
当一个属性发生变化时，需要执行对应的操作；一对多；
监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数，

代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>

	</head>

	<body>
		<div id="app">
			<p>监听属性</p>

			m: <input v-model="m"><br />
			km: <input v-model="km"><br />
			
			<p>计算属性</p>
			<table>
				<tr>
					<td>单价</td>
					<td>数量</td>
					<td>小计</td>
				</tr>
				<tr>
					<td>
						<input v-model="danjia">
					</td>
					<td>
						<input v-model="n">
					</td>
					<td>
						{{xiaoji}}
					</td>
				</tr>
			</table>
			
		</div>

		<script>
			new Vue({
				el: '#app',
				data() {
					return {
						m: 1000,
						km: 1,
						danjia:199,
						n:1,
					

					}
				},
				watch:{
					m:function(v){
						//此时的v的属性是被监听的属性
						this.km=parseInt(v)/1000
					},
						
					km:function(v){
						this.m=parseInt(v)*1000
					}
				},
				computed:{
					xiaoji:function(){
						return this.danjia*this.n;
					}
				}

			})
		</script>
	</body>
</html>