vue学习日记Day8
vue学习日记Day8:对事件属性绑定进行一个更清楚的补充,感觉这个地方比较难,自己进度有点慢,还有一个是对Day6中的复杂遍历,利用绑定实现的一个小练习。绑定事件属性:1.给v-bind:class 了一个对象目的是为了动态切换class2.动态绑定的样式可以和静态样式共存3.class的表达式过于复杂或者逻辑复杂可以绑定一个计算属性4.需要多个class 可以使用数组语法5.使用三元表达式切换
·
vue学习日记Day8:
对事件属性绑定进行一个更清楚的补充,感觉这个地方比较难,自己进度有点慢,还有一个是对Day6中的复杂遍历,利用绑定实现的一个小练习。
绑定事件属性:
1.给v-bind:class 了一个对象目的是为了动态切换class
2.动态绑定的样式可以和静态样式共存
3.class的表达式过于复杂或者逻辑复杂可以绑定一个计算属性
4.需要多个class 可以使用数组语法
5.使用三元表达式切换
6.数组语法也可以切换
具体实现都在下方代码当中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<title></title>
<style type="text/css">
.backgroundcolor{
background-color: yellow;
}
.red{
color: red;
}
.textDanger{
text-decoration: line-through;
}
.active{
background: black;
color: aliceblue;
}
</style>
</head>
<body>
<div id="app">
<!-- 给v-bind:class 了一个对象目的是为了动态切换class -->
<h1 :class="{backgroundcolor:has,red:error}">v-bind绑定class</h1>
<!-- 动态绑定的样式可以和静态样式共存 -->
<h1 class="backgroundcolor" :class="{red:error}">v-bind绑定class</h1>
<!-- class的表达式过于复杂或者逻辑复杂可以绑定一个计算属性 -->
<h2 :class="computedclass">绑定计算属性</h2>
<!-- 需要多个class 可以使用数组语法 -->
<h2 :class="[activeCls,errorCls]">使用数组语法</h2>
<!-- 使用三元表达式切换 -->
<h2 :class="[has?activeCls:errorCls]">使用数组语法</h2>
<!--数组语法也可以切换 -->
<h2 :class="[{active:has},errorCls]">使用数组语法</h2>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
has:false,
error:true,
activeCls:"active",
errorCls:"error",
},
computed:{
computedclass(){
return{
active:this.has&&!this.error,
textDanger:true,
}
}
}
})
</script>
</body>
</html>
代码所对应的实现效果。
事件属性绑定的练习:
本来这个效果图是Day6练习当中的,但是现在要用事件属性绑定的方法,在随便两个技术的后边,显示出HOT。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<title></title>
<style type="text/css">
.left{
width: 200px;
height: 370px;
border: solid 1px gray;
background-color: antiquewhite;
}
h2{
background-color: aqua;
}
h3{
background-color: aqua;
}
li{
list-style: none;
padding: 0;
}
.hot{
background: red;
color: #fff;
display: inline-block;
font-size: 12px;
}
</style>
</head>
<body>
<div id="app">
<div class="left">
<h2>全部课程</h2>
<div v-for="li in productlist">
<h3>{{li.title}}</h3>
<ul>
<li v-for="pp in li.list">{{pp.name}}<span v-if="pp.isHot" :class="{hot:pp.isHot}">HOT</span></li>
</ul>
<hr v-if="!li.last">
</div>
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
productlist:{
pc:{
title:'前端技术',
list: [
{
name:'html+css',
url:'http://html.com',
},
{
name:'JavaScript',
url:'http://JavaScript.com',
isHot:true,
},
{
name:'Vue/React',
url:'http://Vue.com',
},
{
name:'node.js',
url:'http://node.com',
},
]
},
app:{
title:'后端技术',
last:true,
list: [
{
name:'java',
url:'http://java.com',
},
{
name:'php',
url:'http://php.com',
},
{
name:'express',
url:'http://express.com',
},
{
name:'python',
url:'http://python.com',
isHot:true,
},
]
},
}
},
})
</script>
</body>
</html>
注意在li当中首先写v-if使得hot显示出来,并且在下方随机两个课程的数据当中,设置isHot:true,这样就能在相应的课程后面显示出HOT,其次就是样式了。通过:class绑定后再到css当中设置自己喜欢的样式。注意语法。
总结:
在这些事件绑定当中,感觉比较绕,比较难懂,慢慢理解吧,离自己目标越来越近。加油。
更多推荐
已为社区贡献2条内容
所有评论(0)