【VUE-语法】

最新推荐文章于 2022-12-15 22:31:10 发布

Kateri_a

最新推荐文章于 2022-12-15 22:31:10 发布

阅读量108

点赞数

文章标签： tv vue.js

本文链接：https://blog.csdn.net/ChenBo8520/article/details/125177193

版权

v-model

v-model.lazy 失去焦点后显示

v-model.number 在文本框中输入txt 可转为可运算的数字

v-if v-else-if v-else 加入同条件显示不同的结果

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id = "app">
			<p v-if = "a==0">天气不错</p>
			<p v-else-if = "a==1">你好</p>
			<p v-else>逆天</p>
		</div>
		<script>
			const app={
				data(){
					return{
						a:2
					}
				}
			}
		Vue.createApp(app).mount('#app')
		</script>
	</body>
</html>

v-if 真改变html结构

v-show 只改变样式用于经常出现元素显示/隐藏变换的状态切换

v-for

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id = "app">
			<!--普通循环的遍历 n 表示在arr中遍历的数据 -->
			<p v-for="n in arr">{{n}}</p>
			<!--复杂数据的遍历 n 表示在arr中遍历的数据 -->
			<!--直接访问对象 -->
			{{stu}}
			<!-- 访问单个属性 -->
			{{stu.age}}
			<!--循环访问 获取每一个变量的所有属性值 -->
			<p v-for="s in stu">{{s}}</p>
			<!--带索引 index索引数 key是属性值  value是属性值-->
			<p v-for="value,key,index in stu">
				{{index}},{{key}},{{value}}
			</p>
			<!--在school中遍历 显示所有的信息-->
			<p v-for="s in school">{{s}}</p>
			
			<!--在school中遍历 访问某些属性-->
			<p v-for="s in school">{{s.sname}}:{{s.scope}}</p>
			<!--在school中遍历 k是索引  stu是变量-->
			<p v-for="stu,k in school">{{k}},{{stu.sname}}:{{stu.scope}}</p>
			
			
		</div>
		<script>
			const app={
				data(){
					return{
						arr:[1,2,3,4],
						stu:{sname:'张三',age:20,scope:100},
						school:[
							{sname:'张三',age:20,scope:100},
							{sname:'张si',age:20,scope:220},
							{sname:'张wu',age:20,scope:300},
							{sname:'张liu',age:20,scope:400},
						]
					}
				}
			}
		Vue.createApp(app).mount('#app')
		</script>
	</body>
</html>

VUE语法进阶

计算属性：对属性进行计算。

比如购物车中的物品加一个数量，待付款也跟着变化。

方法：看清楚methods total()写在哪里，在哪里调用。

计算属性：还有computed中的pay实现一样的效果。

区别：计算属性基与缓存的原理运行，本次计算的结果依赖于上次计算的结果。

而方法每次调用都要重新调用方法。

所以更推荐使用计算属性，更快。

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id = "app">
			数量：<input type = "text" v-model = "num"/>
			<hr/>
			<!-- -->
			<!-- 要写方法 methods {{total}}中调用-->
			待付款：{{total()}}
			<!-- 要写方法 computed {{pay}}中调用-->
			待付款：{{pay}}
			
		</div>
		<script>
			const app={
				data(){
					return{
						price:100,
						num:1,
						
						
					}
				},
				computed:{
					pay(){
						return this.price * this.num
					}
				},
				methods:{
					total(){
						return this.price * this.num
					}
				}
			}
		Vue.createApp(app).mount('#app')
		</script>
	</body>
</html>

监听器

上一个例子，如果数量输入为-10，岂不是会亏本。

监听器就是要监听输入的数值，让它是一个正常值。

控制num（数量）值为1-5之间。

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id = "app">
			数量：<input type = "text" v-model = "num"/>
			<hr/>
			<!-- -->
			
			<!-- 要写方法 computed {{pay}}中调用-->
			待付款：{{pay}}
			
		</div>
		<script>
			const app={
				data(){
					return{
						price:100,
						num:1,
						
						
					}
				},
				<!-- 所有的vue的计算属性放在这里-->
				computed:{
					pay(){
						return this.price * this.num
					}
				},
				<!-- 所有的vue的监听器放在这里-->
				watch:{
					<!-- 监视新值（第二个）和旧值（第一个）-->
					num(newValue,oldValue){
						console.log(newValue + ',' + oldValue)
						<!--监听数量-->
						if(newValue > 5 || newValue < 1){
							this.num = oldValue;
						}
					}
				}
				
			}
		Vue.createApp(app).mount('#app')
		</script>
	</body>
</html>