邹城市网站建设,如何配置网站服务器,计算机办公软件培训班,wordpress 显示指定分类文章文章目录一.第一次用vue框架二.要求:1.定义两种样式#xff0c;一种描述正确的状态#xff0c;一种描述错误的状态。2.在结构代码中定义一个块#xff0c;实现绑定正确的样式状态。3.定义一个按钮#xff0c;实现正确和错误两种状态的class切换。三.源代码四.效果一.第一次…
文章目录一.第一次用vue框架二.要求:1.定义两种样式一种描述正确的状态一种描述错误的状态。2.在结构代码中定义一个块实现绑定正确的样式状态。3.定义一个按钮实现正确和错误两种状态的class切换。三.源代码四.效果一.第一次用vue框架
二.要求:
1.定义两种样式一种描述正确的状态一种描述错误的状态。
2.在结构代码中定义一个块实现绑定正确的样式状态。
3.定义一个按钮实现正确和错误两种状态的class切换。
三.源代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srcvue.global.js/script!-- script srchttps://unpkg.com/vuenext/script --style.red-box{background-color: brown; color: white; padding: 10px;width: 500px;}.pink-box{background-color: pink; color: white; padding: 10px;width: 500px;}/style
/head
bodydiv idApplication div classred-box v-ifisShowh1red box/h1p你好/p/divdiv classpink-box v-elsefalseh1pink box/h1p我不好!/p/divdivbutton clicktoggle切换/button/div/div
/body
/htmlscript// 定义一个vue组件const App {data(){return{isShow:true,}},methods: {toggle(){this.isShow ! this .isShow// this.isShow1 ! this.isShow1// this.isShow2 ! this.isShow2}}}// 将vue组件绑定到页面上id为Application的元素上Vue.createApp(App).mount(#Application)
/script四.效果
