仿站下载工具,平面设计软件图标图片,网站变宽屏怎么做,英文谷歌seo目录
接下来学习click 例题#xff1a;修改背景颜色
例题#xff1a;反复点击button按钮#xff0c;可以不断切换背景颜色 先看以下例题是回顾vue的用法 bodydiv idbox{{myname}} - {{myage}}/divscriptvar vm new Vue({el…目录
接下来学习click 例题修改背景颜色
例题反复点击button按钮可以不断切换背景颜色 先看以下例题是回顾vue的用法 bodydiv idbox{{myname}} - {{myage}}/divscriptvar vm new Vue({el:#box,data:{myname:lyx,myage:26}})/script/body 运行结果如下vue对象被挂载到vm实例上通过在控制台直接vm.属性名修改 接下来学习click 可以看到click形式是对v-on:click的简写
a v-on:clickdoSomething ... /a!-- 简写 --
a clickdoSomething ... /a vue对象的el、data、methods属性 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title!-- 在线导入 --!-- 开发环境版本包含了用帮助的命令行警告 --script src../vue/vue.js/script
/headbodydiv idbox{{myname}} - {{myage}}button clickhandleChange()点我控制台输出/button/divscriptvar vm new Vue({el:#box,data:{myname:lyx,myage:26},methods:{handleChange(){console.log(哈哈哈哈哈哈哈哈哈);}}//定义所有事件方法})/script/body/html 在handleChange()方法里面对myname和myage的值进行修改点击button页面刷新可以看到 div idbox{{myname}} - {{myage}}button clickhandleChange()click me/button/divscriptvar vm new Vue({el:#box,data:{myname:lyx,myage:26},methods:{handleChange(){console.log(哈哈哈哈哈哈哈哈哈);vm.myname xmq;vm.myage 22;}}//定义所有事件方法})/script 通过this.myname、this.myage来修改值 运行结果如下 例题修改背景颜色 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title!-- 本地导入 --script src../vue/vue.js/scriptstyle.bgRed {background: #da3939;height: 100px;width: 100px;}.bgBlue {background: #4dddd1;height: 100px;width: 100px;}/style
/headbodydiv idbox{{myname}} - {{myage}}button clickhandleChange()click me/buttondiv :classwhichcolor/div/divscriptnew Vue({el: #box,data: {myname: lyx,myage: 26,whichcolor: bgRed},methods: {handleChange(t) {console.log(哈哈哈哈哈哈哈哈哈, this);this.myname xmq;this.myage 22;this.whichcolor bgBlue;}}//定义所有事件方法})/script/body/html 例题反复点击button按钮可以不断切换背景颜色 效果如下 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title!-- 本地导入 --script src../vue/vue.js/scriptstyle.bgRed {background: #da3939;height: 100px;width: 100px;}.bgBlue {background: #4dddd1;height: 100px;width: 100px;}/style
/headbodydiv idbox{{myname}} - {{myage}}button clickhandleChange()click me/buttondiv :classwhichcolor/divbr /div :classisColor?bgRed:bgBlue/div/divscriptnew Vue({el: #box,data: {myname: lyx,myage: 26,whichcolor: bgRed,isColor: true},methods: {handleChange(t) {console.log(哈哈哈哈哈哈哈哈哈);this.myname xmq;this.myage 22;this.whichcolor bgBlue;this.isColor !this.isColor;}}//定义所有事件方法})/script/body/html
