属性操作
属性语法, vue1中: v-bind:属性名="JS代码"
<a v-bind:href="baidu.href">{{baidu.title}}</a>
vue2语法 :属性名="JS代码"
<a :href="baidu.href">{{baidu.title}}</a>
注意:
-
{{ }} : 仅限在 标签内容中使用
-
: 和不带: 的差异, 不带: 是HTML语法, 值是字符串, 带: 是Vue语法, 值是JS代码, 会运算
<div xx="8+8">1111</div> <div :xx="8+8">1111</div>
动态样式
点击谁, 谁高亮显示, 先书写HTML 再来书写CSS, 其次就是JS啦
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>动态样式</title> <style> ul, li { margin: 0; padding: 0; list-style-type: none; } ul { display: flex; background-color: #002c69; padding: 0 40px; } li { color: #fff; user-select: none; padding: 15px 25px; cursor: pointer; } li.active { background-color: orange; } </style> </head> <body> <div id="box"> <h3>当前序号: {{now}}</h3> <ul> <li @click="now=0" :class="now==0 ? 'active' : ''">首页</li> <li @click="now=1" :class="now==1 ? 'active' : ''">关于净美仕</li> <li @click="now=2" :class="{active: now==2}">公司动态</li> <li @click="now=3" :class="{active: now==3}">产品中心</li> <li @click="now=4" :class="{active: now==4}">联系我们</li> </ul> </div> <script src="./vue.js"></script> <script> new Vue({ el: '#box', data: { now: 0 } }) </script> </body> </html>
数据: 保存当前激活的 项目序号, 现在Vue声明一下当前序号, 然后每一个 li 元素绑定点击事件, 添加class 样式就可以了, 简化语法: 本质上 判断now==几, 是真就active 不是就空, :class="{active: now==几}" , 真就添加active, 假就不添加active
动态style样式
<button @click="size++">变大:{{size}}</button> <p :style="`font-size: ${size}px;`">Hello</p>
-
属性名支持两种写法: 小驼峰 和 蛇形命名法
-
属性名不允许中划线, 必须用字符串才合法
作者提供了优化语法
<p :style="{fontSize: size+'px'}">World</p>
