中国联通网站备案系统,Wordpress建立空白页面,重庆网站制作公司,哪里有焊接加工外发的概述
v-bind指令可以说是Vue3中最常用的指令之一#xff0c;使用v-bind#xff0c;我们几乎能够给任何实现动态的绑定比值。
这里#xff0c;我们主要演示以下#xff0c;通过v-bind动态绑定CSS样式。
基本用法
我们创建src/components/Demo11.vue#xff0c;在这个组…概述
v-bind指令可以说是Vue3中最常用的指令之一使用v-bind我们几乎能够给任何实现动态的绑定比值。
这里我们主要演示以下通过v-bind动态绑定CSS样式。
基本用法
我们创建src/components/Demo11.vue在这个组件中我们要
场景1动态绑定一个CSS样式场景2动态绑定一个CSS样式类
代码如下
script setup
const styleObj {color: red,fontSize: 33px,
}
/script
templatediv :stylestyleObjstyleObj 动态样式/divdiv :class{active:true}动态样式类true/divdiv :class{active:false}动态样式类false/div
/template
style
.active {color: yellow;
}
/style接着我们修改src/App.vue引入Demo11.vue并进行渲染
script setup
import Demo from ./components/Demo11.vue
/script
templateh1欢迎跟着Python私教一起学习Vue3入门课程/h1hrDemo/
/template然后我们浏览器访问http://localhost:5173/ 完整代码
package.json
{name: hello,private: true,version: 0.1.0,type: module,scripts: {dev: vite,build: vite build},dependencies: {vue: ^3.3.8},devDependencies: {vitejs/plugin-vue: ^4.5.0,vite: ^5.0.0}
}vite.config.js
import { defineConfig } from vite
import vue from vitejs/plugin-vueexport default defineConfig({plugins: [vue()],
})index.html
!doctype html
html langenheadmeta charsetUTF-8 /link relicon typeimage/svgxml href/vite.svg /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleVite Vue/title/headbodydiv idapp/divscript typemodule src/src/main.js/script/body
/htmlsrc/main.js
import { createApp } from vue
import App from ./App.vuecreateApp(App).mount(#app)src/App.vue
script setup
import Demo from ./components/Demo11.vue
/script
templateh1欢迎跟着Python私教一起学习Vue3入门课程/h1hrDemo/
/templatesrc/components/Demo11.vue
script setup
const styleObj {color: red,fontSize: 33px,
}
/script
templatediv :stylestyleObjstyleObj 动态样式/divdiv :class{active:true}动态样式类true/divdiv :class{active:false}动态样式类false/div
/template
style
.active {color: yellow;
}
/style启动方式
yarn
yarn dev浏览器访问http://localhost:5173/
