Vue语法1

最新推荐文章于 2024-08-05 19:23:36 发布

秋月平湖

最新推荐文章于 2024-08-05 19:23:36 发布

阅读量55

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_49677278/article/details/131798713

版权

Vue语法1

一.插值

插值：双括号内放入data内属性名

v-html：html文本转义

v-bind可以调出属性的值，若不在value前加上仅仅显示字符串

vue完整支持js

可用来拼接属性id

代码：

语法

{{str}}
{{str.substr(0,5)}}
{{num+1}}
{{flag ? 'ok' :'No'}}
这是第一百个学生

			}
		})
	</script>
</body>

结果：
在这里插入图片描述

二.指令

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

1.v-if/v-else/v-else-if

v-else/v-else-if需要跟v-if搭配使用

2.v-show跟v-if的区别

当条件不符合时，v-if属性的标签仅仅是隐藏起来了代码中仍然存在，而v-show属性的标签在此时不存在于页面中

3.v-for

数组内有多属性的可以通过.调用

4.v-on

v-on:click等价于@click

5.通过自由改变数据的值来改变方法的触发事件

使用在标签属性中使用中括号调用数据，再将数据与文本框的值绑定

代码：

<!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/v-else-if</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="score<60">不及格</span>
			
			<span v-if="score>100">不存在</span>
			
			<p v-show="score>100">不存在</p>
			
			<p>v-for</p>
			<div v-for="n in arr">
				{{n}}<br />
			</div>
			<div v-for="n in list1">
				{{'id='+n.id+'name='+n.name}}<br />
				
			</div>
			<p>v-on</p>
			<button type="button" v-on:click="fangfa">dianwo </button>
			<button type="button"@click="fangfa">dianwo </button>
			
			<input v-model="env"/><br>
			<button type="button" v-on:[env]="fangfa">魔法按钮</button>
		</div>
			
		<script>
			 new Vue({
				 el:'#app',
				 data(){
					 return{
						 score:89,
						 arr:['篮球','足球','地球'],				
						 list1:[{id:1,name:'篮球'},
						 {id:2,name:'足球'},
						 {id:3,name:'地球'}],
						 env:'click'
					 }
					 
					 
				 },
				 methods:{
					 fangfa(){
						 alert("方法执行")
					 }
				 }
			 })
			
		</script>
	</body>
</html>

运行结果在这里插入图片描述

三.过滤器

过滤器函数可以接受表达式的值作为第一个参数

过滤器可以串联，如{{str|filterA|filterB}}

过滤器是javaScript函数，因此可以接收参数，如{{str|filterA(‘arg1’,‘arg2’)}}

可以使用外部引入的js的过滤器方法

代码：

<!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>
		 <script src="date.js"></script>
	</head>
	<body>
		<div id="app">
			<p>基本过滤器</p>
			{{str}}<br/>
			{{str|filterA}}<br/>
			{{str|filterA|filterB}}<br/>
			{{str|filterC(0,3)}}<br/>
			
			<p>外部引入js</p>
			{{curtime}}<br/>
			{{curtime|format}}
		</div>
		<script>
			Vue.filter('format',function(v){
				return fmtDate(v,'yyyy-MM-dd hh:mm:ss')
			})
			new Vue({
				el:'#app',
				filters:{
					filterA:function(v){
						return v.substring(0,5)
					},
					filterB:function(v){
						return v.substring(1,2)
					},
					filterC:function(v,a,b){
						return v.substring(a,b)
					}
				},
				data(){
					return{
						str:'Hello Word',
						curtime: new Date()
					}
					
				}
			})
		</script>
	</body>
</html>

运行结果:

在这里插入图片描述

四.监听属性，计算属性

使用watch函数来监听属性，在其中创建属性的同名方法来修改属性值，可以实现单位转换功能

computed来创建属性返回经过计算后的属性，可以实现购物车功能

代码：

<!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>
		 <script src="date.js"></script>
	</head>
	<body>
		<div id="app">
			<p>监听属性</p>
			m:<input  v-model="m"/>
			km:<input  v-model="km"/>
			<p>计算属性</p>
			<!-- 单价，数量，小计 -->
			<table>
				<tr>
					<td>单价</td>
					<td>数量</td>
					<td>小计</td>
				</tr>
				<tr>
					<td><input type="text" v-model="danjia"></td>
					<td><input type="text" v-model="shuliang"></td>
					<td>{{xiaoji}}</td>
				</tr>
			</table>
		</div>
		<script>
			
			new Vue({
				el:'#app',
				data(){
					return{
						m:1000,
						km:1	,
						danjia:199,
						shuliang:1,
						
					}
									
				},
				watch:{
					m:function(v){
						// v指的是被监听的属性
						this.km=parseInt(v)/1000;					
					},
					km:function(v){
						// v指的是被监听的属性
						this.m=parseInt(v)*1000	;				
					}
				
				},
				computed:{
					xiaoji:function(){
						return this.danjia*this.shuliang;
					}
				}
			
			})
		</script>
	</body>
</html>

v指的是被监听的属性
this.km=parseInt(v)/1000;
},
km:function(v){
// v指的是被监听的属性
this.m=parseInt(v)*1000 ;
}

			},
			computed:{
				xiaoji:function(){
					return this.danjia*this.shuliang;
				}
			}
		
		})
	</script>
</body>

```

秋月平湖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue语法1

Vue基础语法
复制链接

扫一扫