14. [基础]模板样式绑定1-初识

目录
文章目录隐藏
  1. 准备干净的页面
  2. 写两个最基本的样式 并引入到模板
  3. Vue 中用对象和数组的形式控制样式

这篇文章我们主要学习 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>

你当然也可以直接复制这段代码,然后进行练习。

写两个最基本的样式 并引入到模板

在文件的下方,我们写三个最进本的样式redgreenbackground,代码分别如下:

<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>  
`

这时候再到浏览器中查看效果,就会有两个样式被绑定了redbackground。如果你这首把 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,当然你也可以在浏览器的控制台查看。

「点点赞赏,手留余香」

2

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 14. [基础]模板样式绑定1-初识

3 评论

  1. 这里写的不对吧:
    有了这个变量(或者叫做数据项)以后,就可以用bind的形式进行绑定。
    v-bind:class=”red”
    :class=”red”
    应该是:
    v-bind:class=”classString”
    :class=”classString”

  2. 这里写的不对吧:
    有了这个变量(或者叫做数据项)以后,就可以用bind的形式进行绑定。
    mybj123.com
    mybj123.com
    应该是:
    mybj123.com
    mybj123.com

发表回复