属性操作
属性语法, 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>