Vue基础语法（插值、指令、过滤器、计算属性与监听属性）

最新推荐文章于 2022-04-15 09:53:42 发布

Java张一口慧

最新推荐文章于 2022-04-15 09:53:42 发布

阅读量154

点赞数

文章标签： Vue基础语法

本文链接：https://blog.csdn.net/qq_44847231/article/details/98063624

版权

Vue基础语法（插值、指令、过滤器、计算属性与监听属性）

插值
指令
过滤器
计算属性
监听属性

插值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<title></title>
	</head>
	<body>
		<div id="a">
			<ul>
				<li>
					<h3>文本</h3>
					{{msg}}
				</li>
				<li>
					<h3>html</h3>
					<div v-html="vuehtml"></div>
				</li>
				<li>
					<h3>属性</h3>
					<input type="text" :value="msg" />
				</li>
				<li>
					<h3>表达式</h3>
					{{str.substr(0,6).toUpperCase()}}
					{{ number + 1 }}
					{{ ok ? 'YES' : 'NO' }}
				</li>
				<li v-bind:id="'list-' + id">我的Id是js动态生成的</li>
				
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: "#a",
			data() {
				return {
					msg: 'hello vue',
					vuehtml: '<span style="font-size: 30px;">Vue对html的解析</span>',
					str:'https://www.csdn.net',
					number:4,
					ok:true,
					id:6
				};
			}
		});
	</script>
</html>

在这里插入图片描述

指令

指的是带有“v-”前缀的特殊属性
v-bind与v-model的区别
v-model是做数据双向绑定的指令
v-bind只是将对应的值给填写到指定属性中
例如：v-bind:value简单来说就是将值填写到value=""
然后value的值发生改变，并不会影响vue实例中的变量值
简写:

Vue为v-bind和v-on这两个最常用的指令，提供了特定简写
          <a v-bind:href="url">...</a>
          <a :href="url">...</a>
  
          <a v-on:click="doSomething">...</a>
          <a @click="doSomething">...</a>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<title></title>
	</head>
	<body>
		<div id="a">
			<ul>
				<li>
					<h3>条件指令</h3>
					<input type="text" v-model="score" />
					<div v-if="score>90">A</div>
					<div v-else-if="score>80">B</div>
					<div v-else-if="score>70">C</div>
					<div v-else-if="score>60">D</div>
					<div v-else="">E</div>
				</li>
				<li>
					<h3>v-show</h3>
					<input type="text" v-model="show" />
					<div v-show="show">出现</div>
				</li>
				<li>
					<h3>v-for</h3>
					<div v-for="item,index in arr">
						{{item}},{{index}}
					</div><br/>
					<div v-for="item,index in obj">
						{{item.name}},{{index}}
					</div>
				</li>
				<li>
					<h3>v-bind</h3>
					{{score}}
					<input type="text" v-bind:value="score" />
				</li>
				<li>
					<h3>v-model</h3>
					{{msg}}
					<input type="text" v-model:value="msg" />
				</li>
				<li>
					<h3>v-on</h3>
					<button v-on:click="a">获取</button>
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: "#a",
			data() {
				return {
					msg:"aaaa",
					score:84,
					show:null,
					arr:[1,345,234,2],
					obj:[{id:1,name:'aa'},{id:2,name:'bb'},{id:3,name:'cc'}]
				};
			},
			methods:{
				a(){
					console.log(this.msg)
				}
			}
		});
	</script>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<title></title>
	</head>
	<body>
		<div id="a">
			<ul>
				<li>
					<h3>动态参数</h3>
					<input type="text" v-model="evname" />
					<button v-on:[evname]="a">获取</button>
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: "#a",
			data() {
				return {
					msg:"aaaa",
					evname:'dblclick'
				};
			},
			methods:{
				a(){
					console.log(this.msg)
				}
			}
		});
	</script>
</html>

在这里插入图片描述

过滤器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<title></title>
	</head>
	<body>
		<div id="a">
			<ul>
				<li>
					<h3>局部过滤器</h3>
					{{msg}}<br>
					{{msg|a}}
				</li>
				<li>
					<h3>局部过滤器可串联</h3>
					{{msg}}<br>
					{{msg|a|b}}<br>
					{{msg|b|a}}
				</li>
				<li>
					<h3>全局过滤器</h3>
					{{msg}}<br>
					{{msg|c}}
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		Vue.filter('c',function(v){
			return v.substring(9);
		})
		new Vue({
			el: "#a",
			data() {
				return {
					msg:"https://www.csdn.net/",
				};
			},
			filters:{
				a(v){
					return v.substring(5);
				},
				b(v){
					return v.substring(3,15);
				}
			}
		});
	</script>
</html>

在这里插入图片描述

计算属性

计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<title></title>
	</head>
	<body>
		<div id="a">
			<ul>
				<li>
					<h3>计算属性</h3>
					数量：<input type="text" v-model="num" />
					单价：<input type="text" v-model="price" />
					总价：{{total}}
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: "#a",
			data() {
				return {
					num:1,
					price:14
				};
			},
			computed:{
				total(){
					return parseInt(this.num)*parseInt(this.price);
				}
			}
		});
	</script>
</html>

在这里插入图片描述

监听属性

监听属性 watch，我们可以通过 watch 来响应数据的变化

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<title></title>
	</head>
	<body>
		<div id="a">
			<ul>
				<li>
					<h3>监听属性</h3>
					km：<input type="text" v-model="km" />
					m：<input type="text" v-model="m" />
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: "#a",
			data() {
				return {
					km:1,
					m:1000
				};
			},
			watch:{
				km(v){
					this.m = v*1000;
				},
				m(v){
					this.km=v/1000;
				}
			}
		});
	</script>
</html>

在这里插入图片描述
计算属性和监听属性的区别:
computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；
computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，

Java张一口慧

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue基础语法（插值、指令、过滤器、计算属性与监听属性）

Vue基础语法（插值、指令、过滤器、计算属性与监听属性）插值指令过滤器计算属性监听属性插值<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></scri...
复制链接

扫一扫