您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要讲解了“如何理解VUE uni-app模板语法”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何理解VUE uni-app模板语法”吧!
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>
感谢各位的阅读,以上就是“如何理解VUE uni-app模板语法”的内容了,经过本文的学习后,相信大家对如何理解VUE uni-app模板语法这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。