公司网站后台登陆重庆火灾新闻最新消息

当前位置： 首页 > news >正文

公司网站后台登陆,重庆火灾新闻最新消息,动漫制作和动漫设计的区别,营销活动策划目录 响应式数据 ref reactive 事件绑定指令 v-on v-on 鼠标监听事件 v-on 键盘监听事件 v-on 简写形式 属性动态化指令 v-bind iuput标签动态属性绑定 img标签动态属性绑定 b标签动态属性绑定 v-bind 简写形式 条件渲染指令 v-if 遍历指令 v-for 遍历对象的值 遍历…目录 响应式数据 ref reactive 事件绑定指令 v-on v-on 鼠标监听事件 v-on 键盘监听事件 v-on  简写形式 属性动态化指令 v-bind iuput标签动态属性绑定 img标签动态属性绑定 b标签动态属性绑定 v-bind 简写形式 条件渲染指令 v-if 遍历指令 v-for 遍历对象的值  遍历对象的值和索引 遍历对象的值和键 遍历对象的值键和索引 指令嵌套 项目实战 文字按钮切换图片 v-on切换上一张 v-on切换下一张 v-bind绑定图片的路径 数字按钮跳转图片 数字按钮 跳转函数设置 跳转函数绑定 完整代码 响应式数据 响应式数据是指数据在改变时能够自动更新我们可以通过 ref, reactive 让数据变成响应式 ref 可以定义基本类型的响应式变量 let xxxref(初始值) div idapp p个人信息/pp性别{{ gender }}/pp年龄{{ age }}/pbutton clickgenderChange点击更改性别/buttonbrbutton clickageChange点击年龄加1/button/divscript typemodule// 导入响应数据类型 refimport {createApp,ref} from./vue.esm-browser.jscreateApp({setup(){let gender 女;let age ref(25);const genderChange() {gender.value 男;console.log(成功修改性别)}const ageChange() {age.value 1;console.log(成功加1)}return{gender,age,genderChange,ageChange}}}).mount(#app);/script reactive 定义对象类型数据 div idapp p个人信息/pp年龄{{ test_1.age }}/pp性别{{ test.gender }}/pbutton clickageChange点击年龄加1/buttonbrbutton clickgenderChange点击更改性别/button/divscript typemodule// 导入响应数据类型 reactiveimport {createApp,reactive} from./vue.esm-browser.jscreateApp({setup(){const test{gender:女};const genderChange() {test.gender 男;console.log(成功修改性别)}const test_1reactive({age:18});const ageChange() {test_1.age 1;console.log(成功加1)}return{test,test_1,genderChange,ageChange}}}).mount(#app);/script 事件绑定指令 v-on 用于监听DOM事件并触发对应的方法和JS中的监听器一样可以在HTML元素上添加事件监听器当这个事件被触发时会执行指定的方法。 格式v-on  :  click监听的事件如键盘或鼠标事件test_2监听的节点 v-on 鼠标监听事件 v-on  :  click鼠标事件test_2监听的节点 div idapp h2{{test_1.name}}/h2button v-on:clicktest_2单击修改名字/button/divscript typemoduleimport {createApp,ref,reactive} from./vue.esm-browser.jscreateApp({setup(){初始值const test_1reactive({name:木木,});修改的值const test_2(){test_1.name花花console.log(鼠标单击成功);}返回的值return{test_1,test_2,}}}).mount(#app);/script 单击按钮后 v-on 键盘监听事件 v-on  :  keyup . v监听键盘“  v ”test_2 监听的节点             enter space tab 按键修饰符             keyup是在用户松开按键时才触发             keydown是在用户按下按键时立即触发 div idapp h2{{test_1.name}}/h2button v-on:keyup.vtest_2按下键盘v即可修改名字!/button/divscript typemoduleimport {createApp,ref,reactive} from./vue.esm-browser.jscreateApp({setup(){ 初始值 const test_1 reactive({name: 花花,}); 修改值 const test_2 () {test_1.name 木木,console.log(键盘修改名字成功);} 返回值return{test_1,test_2,}}}).mount(#app);/script 按下键盘前  按下键盘后  v-on 键盘组合快捷键  button v-on:keyup.ctrl.entertest_2按下ctrlenter即可修改名字!/buttonbutton v-on:keyup.ctrl.atest_2按下ctrla即可修改名字!/button v-on  简写形式 将 v-on: click 改为  click  即为简写状态 以下为v-on 键盘事件和鼠标事件的简写形式button clicktest_2单击修改名字/buttonbutton keyup.entertest_2按下键盘enter即可修改名字!/button button keyup.Tabtest_2按下键盘Tab即可修改名字!/button button keyup.spacetest_2按下键盘enter即可修改名字!/button 属性动态化指令 v-bind 用于将数据绑定到HTML元素的属性上。通过v-bind将Vue的数据动态地绑定到HTML标签的属性上可以动态显示数据。v-bind指令可以用于绑定HTML元素的任何属性。 格式 v-bind  :  src标签内属性   test.img iuput标签动态属性绑定 div idapp img v-bind:srctest.img brbutton clickchange单击更换照片/button/divscript typemoduleimport {createApp,ref,reactive} from./vue.esm-browser.jscreateApp({setup(){const testreactive({img:./img_src/logo1.png,});const change(){test.img./img_src/logo2.png;console.log(成功更换照片);}return{test,change,}}}).mount(#app);/script img标签动态属性绑定 div idapp input typetext v-bind:valuetest.wordbrbutton clickchange单击补充句子/button/divscript typemoduleimport {createApp,ref,reactive} from./vue.esm-browser.jscreateApp({setup(){const testreactive({word:I need ,});const change(){test.wordyou;console.log(句子补充完整啦!)}return{test,change,}}}).mount(#app);/script 单击前 单击后  b标签动态属性绑定 style.wordColor{color: blue;}/style /head bodydiv idapp b v-bind:class{wordColor:test.wordStatu}你好!!/bbrbutton clickchange单击更改文字颜色/button/divscript typemoduleimport {createApp,ref,reactive} from./vue.esm-browser.jscreateApp({setup(){ 设置控制文本颜色的开关为 falseconst testreactive({wordStatu: false}); 当用户单击后控制文本颜色的开关为 trueconst change(){test.wordStatu!test.wordStatu;console.log(颜色更改成功!);}return{test,change,}}}).mount(#app); 单击后  v-bind 简写形式 img :srctest.img input typetext :valuetest.word b :class{wordColor:test.wordStatu}你好!!/b 条件渲染指令 v-if 可以隐藏节点v-if是通过删除节点实现隐藏。当遇到需要频繁显示和隐藏的场景时不适合使用v-if 因为频繁增删节点会导致渲染效率下降 div idapp b v-iftest.word你好!!/bbrbutton clickchange单击隐藏文字/button/divscript typemoduleimport {createApp,ref,reactive} from./vue.esm-browser.jscreateApp({setup(){const testreactive({word: true});const change(){test.word!test.word;}return{test,change,}}}).mount(#app);/script 可以通过特定的条件来决定是否显示或隐藏特定的DOM元素当条件为真时v-if指令将元素添加到DOM中当条件为假时v-if指令将元素从DOM中移除。 div idapp p{{test.watch}}w/pp v-iftest.watch100一般浏览量/pp v-else-iftest.watch100 test.watch300浏览量持续上升/pp v-else-iftest.watch300 test.watch600浏览量向千靠拢啦!努努力!/pp v-else恭喜你,火啦!!/pbutton clickadd(40,50)单击增加流量/button/divscript typemoduleimport {createApp,ref,reactive} from./vue.esm-browser.jscreateApp({setup(){const testreactive({watch:0});const add(a,b){test.watchabconsole.log(浏览量为test.watch);}return{test,add}}}).mount(#app);/script 单击后  遍历指令 v-for 指定一个数组或对象作为遍历的数据源然后使用v-for指令来迭代数据源中的每一项 v-for    value值index索引key键 in test.user要遍历的数据源 遍历对象的值  div idapp 遍历数组内的值 p v-forvalue in test.user{{value}}/p/divconst testreactive({user:{name:木木,age:22,sex:男,hobby:读书},number:[十一,十二,十三]});return{test,} 遍历对象的值和索引 写指令时先值后索引 div idapp p v-for(value,index) in test.number{{ index }} : {{ value }} /p/divscript typemoduleimport {createApp,ref,reactive} from./vue.esm-browser.jscreateApp({setup(){const testreactive({user:{name:木木,age:22,sex:男,hobby:读书},number:[十一,十二,十三]});return{test,}}}).mount(#app);/script 遍历对象的值和键 写指令时先值后键 p v-for(value,key) in test.user{{ key }} : {{ value }} /p 遍历对象的值键和索引 写指令时先值再键后索引 p v-for(value,key,index) in test.user{{index}}: {{ key }} : {{ value }} /p 指令嵌套 template 标签可以用来包装多个元素或者多行代码, 不会在页面中渲染 template v-for(value,key,index) in test.userp v-ifindex 0 {{ index }} : {{ key }} : {{ value }}/p
/template 指令嵌套 运行结果 项目实战 做一个动态相册如下图 解析 用v-on为切换相片的按钮绑定上一个函数这个函数负责更改图片路径 v-bind绑定图片的路径使得图片路径可以自动更新 文字按钮切换图片 v-on切换上一张 注图片的命名要有顺序的命名方便实现功能 当我们点击上一张时照片的数量是在不断减少的并伴随着照片路径的更改 我们可以先给照片的数量和路径做一个初始值的设置其次用函数来控制照片的数量及路径的改变最后将函数绑定到按键上通过v-on来监听鼠标事件并触发对应的方法 初始值的设置 const imgreactive({ 照片数量 num:1, 照片的路径 url:./img_src/logo1.png}); 照片数量及路径的改变 上一张 const nagtive(){ 设置照片数量自减 img.num– 当照片数减到0时 if(img.num0){ 使照片数等于4 img.num4 这样就实现了一个循环的效果 }照片路径的改变 img.url./img_src/logo\({img.num}.png 照片的路径随照片数改变 } v-on绑定按钮 button clicknagtive上一张/button v-on切换下一张 步骤与上面大庭相近不同的是当我们点击下一张时照片的数量不断增加的所以我们可以将上面自减的设置改为自加 const add(){ 照片数自加 img.num 当到数量为5时 if(img.num5){ 使照片数回到1 img.num1; 达到循环的效果 }照片路径随照片数改变 img.url./img_src/logo\){img.num}.png} button clickadd下一张/button v-bind绑定图片的路径 img v-bind:src img.url classimg alt图片加载失败 数字按钮跳转图片 数字按钮 利用遍历指令v-for来遍历 数据源(4)  以内的值数字按钮就出来了 ul typenone li v-forvalue in 4{{value}}/li/ul 跳转函数设置 创建一个函数这里命名为jump,通过函数jump 调用v-for所遍历的值value将照片和路径绑定到数字按钮第1张照片与数字按钮1绑定以此类推 const jump(value){img.numvalue;img.url./img_src/logo\({img.num}.png} 跳转函数绑定 通过v-on将跳转函数绑定到数字按钮上监听鼠标事件并触发对应的方法 ul typenone classboxli v-forvalue in 4 clickjump(value){{value}}/li/ul 完整代码 headmeta charsetUTF-8title相册/titlestyle 样式设置.img{width: 480px; height: 240px;border: 1px bisque solid;}.box{margin-bottom: 20px;padding: 0;}ul li{float: left;background-color: bisque;height: 20px;width: 20px;margin-left: 10px;text-align: center;}/style /headbodydiv idapp 相册基本骨架h2基于Vue3实现的相册展示第{{img.num}}张相片/h2img v-bind:src img.url classimg alt图片加载失败 ul typenone classboxli v-forvalue in 4 clickjump(value){{value}}/li/ulbrbutton clicknagtive上一张/button button clickadd下一张/button/divscript typemoduleimport { createApp, ref,reactive } from ./vue.esm-browser.jscreateApp({setup(){ 初始值const imgreactive({num:1,url:./img_src/logo1.png});下一张 const add(){img.numif(img.num5){img.num1;}img.url./img_src/logo\){img.num}.png} 上一张const nagtive(){img.num–if(img.num0){img.num4}img.url./img_src/logo\({img.num}.png} 跳转const jump(value){img.numvalue;img.url./img_src/logo\){img.num}.png}return{img,add,nagtive,jump,}}}).mount(#app);/script /body