【Vue】class 与 style 样式绑定

news/2024/7/4 1:44:04 标签: vue.js, javascript, 前端, class, style
class="baidu_pl">
class="article_content clearfix">
class="markdown_views prism-atom-one-dark"> style="display: none;"> style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">

class="toc">

文章目录

style__2">style 样式绑定

  • 示例：
class="prism language-html">class="token doctype">class="token punctuation"><!class="token doctype-tag">DOCTYPE class="token name">htmlclass="token punctuation">>
class="token tag">class="token tag">class="token punctuation"><htmlclass="token punctuation">>
	class="token tag">class="token tag">class="token punctuation"><headclass="token punctuation">>
		class="token tag">class="token tag">class="token punctuation"><meta class="token attr-name">charsetclass="token attr-value">class="token punctuation attr-equals">=class="token punctuation">"utf-8class="token punctuation">"class="token punctuation">>
		class="token tag">class="token tag">class="token punctuation"><titleclass="token punctuation">>class="token tag">class="token tag">class="token punctuation"></titleclass="token punctuation">>
	class="token tag">class="token tag">class="token punctuation"></headclass="token punctuation">>
	class="token tag">class="token tag">class="token punctuation"><bodyclass="token punctuation">>
		class="token tag">class="token tag">class="token punctuation"><div class="token attr-name">idclass="token attr-value">class="token punctuation attr-equals">=class="token punctuation">"appclass="token punctuation">"class="token punctuation">>
			class="token comment"><!-- style -->
			class="token tag">class="token tag">class="token punctuation"><div class="token attr-name">:styleclass="token attr-value">class="token punctuation attr-equals">=class="token punctuation">"myStyleclass="token punctuation">"class="token punctuation">>春花秋月何时了class="token tag">class="token tag">class="token punctuation"></divclass="token punctuation">>
			class="token tag">class="token tag">class="token punctuation"><div class="token attr-name">:styleclass="token attr-value">class="token punctuation attr-equals">=class="token punctuation">"{color:class="token punctuation">'yellowclass="token punctuation">',border:class="token punctuation">'2px solid blueclass="token punctuation">'}class="token punctuation">"class="token punctuation">>春花秋月何时了class="token tag">class="token tag">class="token punctuation"></divclass="token punctuation">>
			class="token tag">class="token tag">class="token punctuation"><div class="token attr-name">:styleclass="token attr-value">class="token punctuation attr-equals">=class="token punctuation">"[myStyle,fontSize]class="token punctuation">"class="token punctuation">>春花秋月何时了class="token tag">class="token tag">class="token punctuation"></divclass="token punctuation">>
		class="token tag">class="token tag">class="token punctuation"></divclass="token punctuation">>
		class="token comment"><!-- 引入vue插件 -->
		class="token tag">class="token tag">class="token punctuation"><script class="token attr-name">srcclass="token attr-value">class="token punctuation attr-equals">=class="token punctuation">"https://cdn.jsdelivr.net/npm/vue/dist/class="tags" href="/tags/VUE.JS.html" title=vue.js>vue.jsclass="token punctuation">"class="token punctuation">>class="token script">class="token tag">class="token tag">class="token punctuation"></scriptclass="token punctuation">>
		class="token tag">class="token tag">class="token punctuation"><scriptclass="token punctuation">>class="token script">class="token language-class="tags" href="/tags/JAVASCRIPT.html" title=javascript>javascript">
			class="token comment">// 声明vue的对象
			class="token keyword">var app class="token operator">= class="token keyword">new class="token class-name">Vueclass="token punctuation">(class="token punctuation">{
				class="token literal-property property">elclass="token operator">: class="token string">"#app"class="token punctuation">, class="token comment">// 将vue对象挂载到dom节点
				class="token literal-property property">dataclass="token operator">: class="token punctuation">{ class="token comment">// 定义vue对象的数据
					class="token literal-property property">myStyleclass="token operator">: class="token punctuation">{
						class="token literal-property property">colorclass="token operator">: class="token string">"pink"
					class="token punctuation">}class="token punctuation">,
					class="token literal-property property">fontSizeclass="token operator">: class="token punctuation">{
						class="token literal-property property">fontSizeclass="token operator">: class="token string">'20px'
					class="token punctuation">}
				class="token punctuation">}class="token punctuation">,
			class="token punctuation">}class="token punctuation">)
		class="token tag">class="token tag">class="token punctuation"></scriptclass="token punctuation">>
	class="token tag">class="token tag">class="token punctuation"></bodyclass="token punctuation">>
class="token tag">class="token tag">class="token punctuation"></htmlclass="token punctuation">>
  • 运行结果：
    在这里插入图片描述

class__42">class 样式绑定

  • 示例：
class="prism language-html">class="token doctype">class="token punctuation"><!class="token doctype-tag">DOCTYPE class="token name">htmlclass="token punctuation">>
class="token tag">class="token tag">class="token punctuation"><htmlclass="token punctuation">>
	class="token tag">class="token tag">class="token punctuation"><headclass="token punctuation">>
		class="token tag">class="token tag">class="token punctuation"><meta class="token attr-name">charsetclass="token attr-value">class="token punctuation attr-equals">=class="token punctuation">"utf-8class="token punctuation">"class="token punctuation">>
		class="token tag">class="token tag">class="token punctuation"><titleclass="token punctuation">>class="token tag">class="token tag">class="token punctuation"></titleclass="token punctuation">>
	class="token tag">class="token tag">class="token punctuation"></headclass="token punctuation">>
	class="token tag">class="token tag">class="token punctuation"><styleclass="token punctuation">>class="token style">class="token language-css">
		class="token selector">.myclass class="token punctuation">{
			class="token property">borderclass="token punctuation">: 1px solid blueclass="token punctuation">;
			class="token property">colorclass="token punctuation">: pinkclass="token punctuation">;
		class="token punctuation">}

		class="token selector">.active class="token punctuation">{
			class="token property">colorclass="token punctuation">: greenclass="token punctuation">;
		class="token punctuation">}

		class="token selector">.danger class="token punctuation">{
			class="token property">borderclass="token punctuation">: 2px dotted redclass="token punctuation">;
		class="token punctuation">}

		class="token selector">.ac class="token punctuation">{
			class="token property">backgroundclass="token punctuation">: lightblueclass="token punctuation">;
		class="token punctuation">}
	class="token tag">class="token tag">class="token punctuation"></styleclass="token punctuation">>
	class="token tag">class="token tag">class="token punctuation"><bodyclass="token punctuation">>
		class="token tag">class="token tag">class="token punctuation"><div class="token attr-name">idclass="token attr-value">class="token punctuation attr-equals">=class="token punctuation">"appclass="token punctuation">"class="token punctuation">>
			class="token comment"><!-- class -->
			class="token tag">class="token tag">class="token punctuation"><div class="token attr-name">:classclass="token attr-value">class="token punctuation attr-equals">=class="token punctuation">"myClassclass="token punctuation">"class="token punctuation">>春花秋月何时了class="token tag">class="token tag">class="token punctuation"></divclass="token punctuation">>
			class="token tag">class="token tag">class="token punctuation"><div class="token attr-name">:classclass="token attr-value">class="token punctuation attr-equals">=class="token punctuation">"{active:isActive,danger:isDanger}class="token punctuation">"class="token punctuation">>春花秋月何时了class="token tag">class="token tag">class="token punctuation"></divclass="token punctuation">>
			class="token tag">class="token tag">class="token punctuation"><div class="token attr-name">:classclass="token attr-value">class="token punctuation attr-equals">=class="token punctuation">"[myClass,myac]class="token punctuation">"class="token punctuation">>春花秋月何时了class="token tag">class="token tag">class="token punctuation"></divclass="token punctuation">>
			class="token tag">class="token tag">class="token punctuation"><div class="token attr-name">:classclass="token attr-value">class="token punctuation attr-equals">=class="token punctuation">"type?class="token punctuation">'activeclass="token punctuation">':class="token punctuation">'dangerclass="token punctuation">'class="token punctuation">"class="token punctuation">>春花秋月何时了class="token tag">class="token tag">class="token punctuation"></divclass="token punctuation">>
		class="token tag">class="token tag">class="token punctuation"></divclass="token punctuation">>
		class="token comment"><!-- 引入vue插件 -->
		class="token tag">class="token tag">class="token punctuation"><script class="token attr-name">srcclass="token attr-value">class="token punctuation attr-equals">=class="token punctuation">"https://cdn.jsdelivr.net/npm/vue/dist/class="tags" href="/tags/VUE.JS.html" title=vue.js>vue.jsclass="token punctuation">"class="token punctuation">>class="token script">class="token tag">class="token tag">class="token punctuation"></scriptclass="token punctuation">>
		class="token tag">class="token tag">class="token punctuation"><scriptclass="token punctuation">>class="token script">class="token language-class="tags" href="/tags/JAVASCRIPT.html" title=javascript>javascript">
			class="token comment">// 声明vue的对象
			class="token keyword">var app class="token operator">= class="token keyword">new class="token class-name">Vueclass="token punctuation">(class="token punctuation">{
				class="token literal-property property">elclass="token operator">: class="token string">"#app"class="token punctuation">, class="token comment">// 将vue对象挂载到dom节点
				class="token literal-property property">dataclass="token operator">: class="token punctuation">{ class="token comment">// 定义vue对象的数据
					class="token literal-property property">myClassclass="token operator">: class="token string">"myclass"class="token punctuation">,
					class="token literal-property property">myacclass="token operator">: class="token string">"ac"class="token punctuation">,
					class="token literal-property property">isActiveclass="token operator">: class="token boolean">trueclass="token punctuation">,
					class="token literal-property property">isDangerclass="token operator">: class="token boolean">trueclass="token punctuation">,
					class="token literal-property property">typeclass="token operator">: class="token boolean">trueclass="token punctuation">,
				class="token punctuation">}class="token punctuation">,
			class="token punctuation">}class="token punctuation">)
		class="token tag">class="token tag">class="token punctuation"></scriptclass="token punctuation">>
	class="token tag">class="token tag">class="token punctuation"></bodyclass="token punctuation">>
class="token tag">class="token tag">class="token punctuation"></htmlclass="token punctuation">>
  • 运行结果：
    在这里插入图片描述

http://www.niftyadmin.cn/n/509341.html

相关文章

【Vue】slot 插槽用法

【Vue】slot 插槽用法

文章目录具名插槽匿名插槽作用域插槽具名插槽 具名插槽 &#xff1a;<slot name"io"></slot>使用方法&#xff0c; 在 使用子组件的时候&#xff0c;它的子级节点 必须加 slot"io"示例&#xff1a; <!DOCTYPE html> <html><h…
阅读更多...
【Vue】动态组件用法（is 与 keep-alive）

【Vue】动态组件用法（is 与 keep-alive）

文章目录动态绑定 is组件缓存 keep-alive动态绑定 is 动态组件&#xff1a;有一个 is 属性&#xff0c;is的值是什么名称就调用什么组件 示例&#xff1a; <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title>…
阅读更多...
【Vue】$... 生命周期方法

【Vue】$... 生命周期方法

文章目录$mount()$forceUpdate()$nextTick()$destroy()$mount() 如果 Vue 实例在实例化时没有收到 el 选项&#xff0c;则它处于“未挂载”状态&#xff0c;没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。 <!DOCTYPE html> <html><…
阅读更多...
【Vue】$... 实例属性用法

【Vue】$... 实例属性用法

文章目录$el$root$parent$children$refs其他属性稍后补充。。。。$el Vue 实例使用的根 DOM 元素。 示例&#xff1a; <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title></head><body><div …
阅读更多...
【Vue】$... 数据实例方法

【Vue】$... 数据实例方法

文章目录$watch$set$delete$watch 语法&#xff1a; // 键路径 vm.$watch(a.b.c, function (newVal, oldVal) {// 做点什么 })// 函数 vm.$watch(function () {// 表达式 this.a this.b 每次得出一个不同的结果时// 处理函数都会被调用。// 这就像监听一个未被定义的计算属性…
阅读更多...
【Vue】$... 事件实例方法

【Vue】$... 事件实例方法

文章目录$on$once$off$emit$on $on&#xff1a;监听当前实例上的自定义事件。事件可以由 vm.$emit 触发&#xff0c;回调函数会接收所有传入事件触发函数的额外参数。语法&#xff1a;vm.$on( event, callback )示例&#xff1a; <!DOCTYPE html> <html><head…
阅读更多...
【Vue】use 插件用法

【Vue】use 插件用法

文章目录使用插件开发插件使用插件 通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成Vue.use 会自动阻止多次注册相同插件&#xff0c;届时即使多次调用也只会注册一次该插件。 import VueRouter from vue-router; import Vue from vue; import …
阅读更多...
【VScode】前端必备插件（持续补充中...）

【VScode】前端必备插件（持续补充中...）

文章目录基础Chinese (Simplified)Auto Close TagAuto Rename TagPath IntellisenseBracket Pair ColorizerJavaScript(ES6) code snippetsHTML CSS SupportbeautifyPrettier - Code formatterVue 插件VeturVue 3 SnippetsVue VSCode Snippets扩展Gitlens&#xff1a;提示提交记…
阅读更多...
最新文章

Copyright @ 2022~2023