迪恩网络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> 总结本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注极客世界的更多内容! |
请发表评论