河南建设教育协会网站2023最新装修效果图

河南建设教育协会网站,2023最新装修效果图,工业设计和产品设计的区别,昭通商城网站建设VUE是一款用于构建用户界面的渐进式的JavaScript框架 准备#xff1a;1.引入VUE模块2.创建VUE程序的应用实例#xff0c;控制视图的元素3.准备元素(div),被Vue控制bodydiv idapph1{{message}}/h1h2{{count}}/h2…VUE是一款用于构建用户界面的渐进式的JavaScript框架准备1.引入VUE模块2.创建VUE程序的应用实例控制视图的元素3.准备元素(div),被Vue控制body div idapp h1{{message}}/h1 h2{{count}}/h2 /div script typemodule import { createApp } from https://unpkg.com/vue3/dist/vue.esm-browser.js createApp({ data() { return { message: hello vue, count: 100 } } }).mount(#app) /script /body常用指令vfor: 注意放入的位置div idcontainer form action/search classsearch-form label forname 姓名/label input typetext idname namename placeholder请输入姓名 label forgender性别/label select idgender namegender option value请选择性别/option option value男男/option option value女女/option /select select namepositon idpositon option value请选择职务/option option value教师教师/option option value学生学生/option /select button typesubmit查询/button button typereset重置/button /form table thead tr th姓名/th th年龄/th th性别/th th职务/th /tr /thead tbody tr v-for(item, index) in empList :keyitem.id td{{item.name}}/td td{{item.age}}/td td{{item.gender}}/td td{{item.job}}/td /tr /tbody /table /div script typemodule import { createApp } from https://unpkg.com/vue3/dist/vue.esm-browser.js createApp({ data() { return { empList: [ {id: 1, name: 张三, age: 18,gender: 男,job: 前端开发,}, {id: 2, name: 李四, age: 19,gender: 男,job: 后端开发,}, {id: 3, name: 王五, age: 20,gender: 男,job: 项目经理} ] } } }).mount(#container) /scriptvif :基于条件判断来创建或移除元素节点 要么显示要么不显示tr v-for(item, index) in empList :keyitem.id td{{item.name}}/td td{{item.age}}/td td span v-ifitem.gender 1男/span span v-else女/span /td td{{item.job}}/td /trvshow;基于CSS 控制显示和隐藏 适用于频繁切换的场景td span v-showitem.job 1前端开发/span span v-showitem.job 2后端开发/span span v-showitem.job 3项目经理/span span v-showitem.job 未知/span /tdv-model 具备双向数据绑定的效果input typetext idname namename placeholder请输入姓名 v-modelsearchForm.name select idgender namegender v-modelsearchForm.gender select namepositon idpositon v-modelsearchForm.job searchForm: { name: , gender: , job: }V-ON 使查询和重置有效methods与data平级button typesubmit v-on:clicksearch查询/button methods: { search() { console.log(this.searchForm); } }