vue属性绑定和style

最新推荐文章于 2024-01-18 10:32:14 发布

dremcl

最新推荐文章于 2024-01-18 10:32:14 发布

阅读量163

点赞数

文章标签： js vue

本文链接：https://blog.csdn.net/dremcl/article/details/104966500

版权

属性绑定

1.在VS Code中新建一个HTML文件，在body标签中新建一个p标签!保存在心网页打开！

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Vue模板语法</title>    <style>        .title{            font-size: 20px;            color:red;        }    </style></head><body>    <p class="title">谁都想认识你</p></body></html>

2.#代表id，.则代表着class。在HTML直接添加样式，并不借用vue：

 <title>Vue模板语法</title>  
<style>        .title{            font-size: 20px;            color:red;        }    </style>

数组绑定

1）使用vue，要绑定属性：v-bind，定义属性，使用div标签包裹，当属性有多个时可用数组的形式来定义：

<body>    <p class="title">谁都想认识你</p>    <div id="app">        <p v-bind:class="[class1,class2]">就像大地渴望雨水</p>
    </div></body></html>
<script src="./vue.js"></script><script>    new Vue({        el: "#app",        data: {            class1: "title",            class2: "main-title"        }    })</script>

2）也可将多个属性放到一起：

n <div id="app">        <p v-bind:class="class1">就像大地渴望雨水</p>    </div></body></html>
<script src="./vue.js"></script><script>    new Vue({        el: "#app",        data: {            class1: "title main-title",            // class2: "main-title"        }    })</script>

通过对象的方式实现

<body>    <p class="title">谁都想认识你</p>    <div id="app">          <p v-bind:class="{title:class1,'main-title':class2}">风景！</p>
    </div></body></html>
<script src="./vue.js"></script><script>    new Vue({        el: "#app",        data: {                     class1: true,            class2: true,        }    })</script>

Style绑定

对象的方式：

 <div id="app">             <!-- <p v-bind:style="{'background-color':background}">梧桐树</p> -->        <!-- 驼峰命名法也可以-->        <!-- <p v-bind:style="{'backgroundColor':background}">梧桐树</p> -->       <!-- 多种属性是可以用这样的方式来表达 -->        <p :style="pstyle">梧桐树</p>
    </div></body></html>
<script src="./vue.js"></script><script>    new Vue({        el: "#app",        data: {                    pstyle: {                'background-color': 'red',                'font-size': "20px"            }        }    })</script>

使用数组的方式绑定

<p v-bind:style = "[pclass1, pclass2]">时间飞逝</p>
<script>    new Vue({        el: "#app",        data: { pclass1:{                'background-color':'rgb(255, 255, 51)',                fontSize: "22px"            },            pclass2:{                'font-weight': "800"            }        }    })</script>

dremcl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue属性绑定和style

属性绑定1.在VS Code中新建一个HTML文件，在body标签中新建一个p标签!保存在心网页打开！<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, in...
复制链接

扫一扫