vue属性绑定和style
程序员文章站
2022-05-15 18:18:01
...
属性绑定
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>