网站建设费 无形资产,wordpress 3306,网站制作 知乎,青浦营销型网站建设目录 方法一#xff1a;事件绑定属性绑定
效果图 完整代码
方法二#xff1a;属性绑定 动态组件 component标签
效果图
完整代码 方法一#xff1a;事件绑定属性绑定
效果图 完整代码
!DOCTYPE html
html langen
headmeta c…目录 方法一事件绑定属性绑定
效果图 完整代码
方法二属性绑定 动态组件 component标签
效果图
完整代码 方法一事件绑定属性绑定
效果图 完整代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titletab/titlestyle*{margin: 0;padding: 0;}h2{width: 500px;height: 400px;background: #9fe4d9;text-align: center;line-height: 400px;display: none;}#app .kk{width: 500px;height: 50px;display: flex;justify-content: space-between;}#app{width: 500px;margin: 50px auto;}span{flex: 1;text-align: center;line-height: 50px;background: #ccc;}.on{background: pink;}#app .onn{display: block;}/style
/head
bodydiv idappdiv classkkspan :class n1 on click.selfn11/spanspan :class n2 on click.selfn22/spanspan :class n3 on click.selfn33/spanspan :class n4 on click.selfn44/spanspan :class n5 on click.selfn55/span/divh2 :class n1 onn1/h2h2 :class n2 onn2/h2h2 :class n3 onn3/h2h2 :class n4 onn4/h2h2 :class n5 onn5/h2/div
/body
/html
script typemodule
import {createApp} from ./js/vue.esm-browser.js;
createApp({data() {return {n:1} },methods:{},
}).mount(#app)
/script
方法二属性绑定 动态组件 component标签 该组件具有一个is属性is属性的值 是 要渲染组件的名字即为is属性的值是哪一个组件名 component 标签就会渲染哪一个组件 缺点component 可以动态渲染组件的内容但是每一个切换都会重新渲染组件内容降低渲染效率 使用keep-alive 标签(组件)可以缓存曾经渲染过的组件从而提高渲染效率 效果图 完整代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title动态组件/titlestyle*{margin: 0;padding: 0;}.wp{width: 440px;height: 30px;margin: 20px auto;display: flex;background: #f0f0f0;}.wp span{flex: 1;height: 30px;text-align: center;line-height: 30px;cursor: pointer;}.wp span.on{background: pink;color: #fff;}h1{width: 440px;margin: 0 auto;}/style
/head
bodydiv idappdiv classwpspan :classnum1on clicknum1水浒传/spanspan :classnum2on clicknum2红楼梦/spanspan :classnum3on clicknum3西游记/spanspan :classnum4on clicknum4三国演义/span/div!-- 动态组件 使用标签 component 该组件具有一个is属性is属性的值 是 要渲染组件的名字即为is属性的值是哪一个组件名component 标签就会渲染哪一个组件缺点component 可以动态渲染组件的内容但是每一个切换都会重新渲染组件内容降低渲染效率使用keep-alive 标签(组件)可以缓存曾经渲染过的组件从而提高渲染效率--keep-alivecomponent :iscompnum/component/keep-alive/div
/body
/html
script typemoduleimport { createApp } from ./js/vue.esm-browser.js; let comp1{template:h1水浒传/h1}let comp2{template:h1红楼梦/h1}let comp3{template:h1西游记/h1p{{n}}/pbutton click n点击/button,data() {return {n:100,}},}let comp4{template:h1三国演义/h1}let aa {template:h1金瓶梅/h1}createApp({data() {return {num:1,}},components:{comp1,comp2,comp3,comp4,aa}}).mount(#app)
/script
