Vue模板语法（一）

最新推荐文章于 2024-09-27 13:18:41 发布

长沙小睿睿

最新推荐文章于 2024-09-27 13:18:41 发布

阅读量120

点赞数

文章标签： vue 过滤器

本文链接：https://blog.youkuaiyun.com/qq_45543118/article/details/108076549

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>VUE模块（插值）语法</title>
		<script type="text/jscript" src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<li>
					<h3>文本</h3>
					{{msg}}
				</li>
				<li>
					<h3>html字符串渲染</h3>
					<div v-html="htmlStr"></div>
				</li>
				<li>
					<h3>v-bind属性绑定指令</h3>
					<input type="text" value="22" />
					<!-- :是v-bind的简写 -->
					<input type="text" :value="age" />
				</li>
				<li>
					<h3>表达式</h3>
					{{str.substr(0,6).toUpperCase()}}
					{{ number + 1 }}
					{{ ok ? 'YES' : 'NO' }}
				<li v-bind:id="'list-' + id">我的Id是js动态生成的</li>
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			data: {
				msg: 'hello vue',
				htmlStr: '<span style="color: red;">红了</span>',
				age: 23,
				str: 'https://www.baidu.com',
				number: 6,
				ok: true,
				id:16
			}
		})
	</script>
</html>

效果图
在这里插入图片描述

过滤器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue的过滤器案例</title>
		<script type="text/jscript" src="../js/vue.js"></script>
	</head>
	<body>
		<div id="aaa">
			<ul>
				<li>
					<h3>局部过滤器的注册</h3>
					{{msg}}<br />
					{{msg|a}}<br />
					{{lao|a}}
				</li>
				<li>
					<h3>局部过滤器的串联</h3>
					{{lao|a|b}}
				</li>
				<li>
					<h3>全局过滤器的注册</h3>
					{{lao|c}}
				</li>
			</ul>
		</div>
	</body>
	<script type="text/x-javascript">
		Vue.filter('c',function(v){
			console.log(v);
			return v.substr(10,11);
		}),
		new Vue({
			el:'#aaa',
			data:{
				msg:'https://www.baidu.com',
				lao:'https://www.laoshiren.com'
			},
			filters:{
				//a是过滤器的名字,函数是过滤器的作用
				'a':function(v){
					console.log(v);
					return v.substr(0,16);
				},
				'b':function(v){
					console.log(v);
					return v.substr(5,17);
				}
			}
		})
	</script>
</html>

效果图
在这里插入图片描述

监听，计算属性

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

效果图
计算前：
在这里插入图片描述
计算后

指令

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>VUE模块（插值）语法</title>
		<script type="text/jscript" src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<li>
					<h3>分支</h3>
					<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="score > 50">E</div>
					<input type="text" v-model="score" />
				</li>
				<li>
					<h3>v-show指令</h3>
					<div v-show="flag">出来吧</div>
					<!-- 分清楚v-if跟v-show的区别
					 v-if：控制的是标签是否打印
					 v-show：控制的是标签的样式
					 -->
				</li>
				<li>
					<h3>v-for指令</h3>
					<div v-for="item,index in data1">
						{{item}}~{{index}}<br />
					</div>
					<hr />
					<div v-for="item,index in data2">
						{{item.id}}~{{item.name}}~{{index}}<br />
					</div>
				</li>
				<li>
					<h3>v-on:clcik指令</h3>
					<button v-on:[evname]="xxx">动态事件调用</button>
					<input type="text" v-model="evname" />
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			data: {
				score: 80,
				flag: true,
				data1: [1, 2, 3, 6, 8, 9],
				data2: [{
						id: 1,
						name: '篮球'
					},
					{
						id: 2,
						name: '足球'
					},
					{
						id: 3,
						name: '象棋'
					}
				],
				evname: 'click'
			},
			methods: {
				xxx() {
					console.log('xxx方法被调用')
				}
			}
		}) 
	</script>
</html>

效果图
在这里插入图片描述

小结

计算属性和监听属性的区别
自己的理解
computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；
computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，
举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择
与watch之间的区别：

刚开始总是傻傻分不清到底在什么时候使用watch，什么时候使用computed。这里大致说一下自己的理解：
watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象
那么对比一下,我们很容易得出computed(计算属性)和watch(监听属性)都存在缓存机制的,性能都处优先选择,那么这两者哪个更好呢?
上述很容易得出监听属性比计算属性复杂的多!因此在一个项目同时可以使用计算属性,methods和监听属性实现时候我们优先使用计算属性其次是监听属性,最后选择methods!