码云 14. [基础]模板样式绑定1-初识
这篇文章我们主要学习 Vue 中的一些关于样式(style)的内容。样式绑定的内容还是不少的，所以分两篇文章：初识和进阶来讲述。首先我们要编写一个基本的最简单的页面。
准备干净的页面
这里新建一个Demo14.html，然后把Demo13.html内容复制到Demo14.html中，并改为下面最简单的样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo14</title>
<script src="https://unpkg.com/vue@next" ></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
const app=Vue.createApp({
template:`
<h2>mybj123.com</h2>
`
})
const vm=app.mount("#app")
</script>
</html>
你当然也可以直接复制这段代码，然后进行练习。
写两个最基本的样式 并引入到模板
在文件的下方，我们写三个最进本的样式red、green和background，代码分别如下:
<style>
.red{color:red;}
.green{color:green;}
.background{ background-color: orange;}
</style>
引用样式,在 Vue 的模板中引用和普通的 html 的方法一样。直接写 class 加上类名就可以了。
template:`
<h2 class="red">mybj123.com</h2>
`
这时候你可以考虑一个问题，如果你希望程序足够灵活，样式也是可以控制的，这样引入样式的方法就不行了。你需要先在 Data 中声明变量，然后在模板template中进行绑定。
声明 data 变量:
data(){
return {
classString:'red',
}
},
有了这个变量（或者叫做数据项）以后，就可以用 bind 的形式进行绑定。
<h2 v-bind:class="red">mybj123.com</h2> <h2 :class="red">mybj123.com</h2>
绑定同样使用v-bind，你也可以使用简写:。上面的两种形式都可以进行绑定。这时候你可以到浏览器中查看一下效果，如果一切正常，此时应该还是红色的。
此时你可以利用浏览器的控制台，输入对应的代码，直接控制样式了。
vm.$data.classString='green'
Vue 中用对象和数组的形式控制样式
对象的绑定方式
比如现在用对象的形式进行绑定样式，好处是一次可以绑定多个样式。比如这样的代码。
data(){
return {
classString:'red',
classObject:{red:true,background:true}
}
},
值为true代表绑定，值为false代表不绑定这个样式。
然后进行绑定:
template:`
<h2 :class="classObject">mybj123.com</h2>
`
这时候再到浏览器中查看效果，就会有两个样式被绑定了red和background。如果你这首把 red 改为 false，那效果就是只有背景颜色，没有字体颜色了。
数组的绑定方式
再来看一下数组的绑定方式，数组也是可以绑定多个样式的。
代码如下:
data(){
return {
classString:'red',
classObject:{red:true,background:true},
classArray:['green','background'],
}
},
这时候再修改一下绑定值,页面样式就变成了绿字，橙色的底啦。
template:`
<h2 :class="classArray">mybj123.com</h2>
`
你也可以在这种数组的数据项中，再嵌套对象的形式。
classArray:['green','background',{red:true}],
如果看不到效果，可以在 CSS 样式中增加!important，当然你也可以在浏览器的控制台查看。
以上关于14. [基础]模板样式绑定1-初识的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。
微信
支付宝如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » 14. [基础]模板样式绑定1-初识
这里写的不对吧：
有了这个变量（或者叫做数据项）以后，就可以用bind的形式进行绑定。
v-bind:class=”red”
:class=”red”
应该是：
v-bind:class=”classString”
:class=”classString”
可不是，整理写错了，感谢
这里写的不对吧：
有了这个变量（或者叫做数据项）以后，就可以用bind的形式进行绑定。
mybj123.com
mybj123.com
应该是：
mybj123.com
mybj123.com