您当前的位置:首页 > 网站建设 > javascript
| php | asp | css | H5 | javascript | Mysql | Dreamweaver | Delphi | 网站维护 | 帝国cms | React | 考试系统 | ajax | jQuery | 小程序 |

浅谈VUE uni-app 模板语法

51自学网 2022-02-21 13:39:29
  javascript

1.v-bind(简写 :)

组件属性中要使用data中定义的数据变量,或组件属性要使用表达式,需用v-bind指定

简写 :

2.v-on(简写@)

监听DOM事件

click.stop 可以阻止事件穿透

3.v-model

数据双向绑定

4.v-if,v-else-if,v-else

条件判断,决定某个内容是否挂载

5.v-show

条件判断,决定某个内容是否显示

6.三元运算符

7.空标签 block

8.v-for:列表渲染

<template>	<view v-bind:class="msg" v-bind:data="1+2">		{{msg}} world!-{{num}}		<button v-on:click="show">点我</button>		<input v-model="msg" />		<view v-if="flag">vue</view>		<view v-else>H5</view>		<view>{{flag ? '显示':'隐藏'}}</view>		<block>			<text>block 空标签 </text>		</block>		<view v-for="(item, index) in arr">{{index+1}}:{{item}}</view>		<view @click="c1">			父级			<view @click.stop="c2">子级</view>		</view>	</view>	</template><script>export default{	//初始化数据,	//data:{},使用对象形式数据不会发生变化,不推荐	data(){		return {			msg:'hello',//变量			arr:['vue','H5','CSS'],//数组			flag:true,//布尔值			num: 1		}	},	onLoad(){		setTimeout(()=>{			this.num++;		},2000)	},	methods:{		show(){			console.log('点了');			this.flag=!this.falg;		},		c1(){			console.log('我是父级');		},		c2(){			console.log('我是子级');		}	}}</script>

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注51zixue.net的更多内容!


下载地址:
浅谈VUE uni-app 开发环境
JavaScript数组及非数组对象的深浅克隆详解原理
万事OK自学网:51自学网_软件自学网_CAD自学网自学excel、自学PS、自学CAD、自学C语言、自学css3实例,是一个通过网络自主学习工作技能的自学平台,网友喜欢的软件自学网站。