Vue中的列表渲染和条件指令渲染实例
<!DOCTYPE html><htmllang=“en”><head><metacharset=“UTF-8”><metaname=“viewport”content=“width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0”><metahttp-equiv=“X-UA-Compatible”content=“ie=edge”><scriptsrc=“https://unpkg.com/vue@3/dist/vue.globa项目网点我wcqh.cnl.js”></script><title>1121作业</title><!– 实例演示列表渲染与条件渲染指令–></head><body><divid=“app”><h3 :style=“{color:red}“>列表渲染:v-for</h3><ul><liv-for=“(item,key) of list” :key=“key”>{{item}}</li></ul></div><hr><divid=“object”><h3v-bind:style=“{color:bl}”>条件渲染:v-if</h3><pv-if=“id === 1”>{{arr[0]}}</p><pv-else-if=“项目网点我wcqh.cnid ===2″>{{arr[1]}}</p><pv-else-if=“id ===3”>{{arr[2]}}</p><pv-else-if=“id ===4”>{{arr[3]}}</p><pv-else>{{arr[4]}}</p></div><script>// 列表渲染:v-for// 应用实例const app =Vue.createApp({ data(){return{ list:[1,2,3,4,5], red:red,}}})// 根组件实例：绑定 app.mount(#app)// 条件渲染:v-ifconst object =Vue.createApp({ data(){return{bl项目网点我wcqh.cn:blue, arr:[1==A,2==B,3==C,4==D,非法数据！], id:1}}})const vm = object.mount(“#object”)// 动态修改 vm.id =1// 1==A vm.id =2// 2==B vm.id =3// 3==C vm.id =800// 非法数据！</script></body></html>
运行结果
© 版权声明
1.如需技术支持联系QQ：1339833655
2. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
3. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
4. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
5. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
6. 如有链接无法下载、失效或广告，请联系管理员处理！
7. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
8. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员！
THE END
会员专属
暂无评论内容