我准备去找份vue 工作干一干,才发现, vue 还是有点不会,这次再复习一下下,基本就没多大问题了!
发现以前所学的,确实有点效果,越熟悉,掌握的越发娴熟了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
ul {
list-style: none;
}
li {
line-height: 80px;
margin-bottom: 10px;
}
.active {
background-color: #bfa;
}
</style>
</head>
<body>
<!-- 宿主app -->
<div id="app">
<p>
<input type="text" v-model="course" placeholder="请输入课程" @keyup.enter="addCourse">
</p>
<ul>
<!-- //这样的方式,在引用的js 中,只会生效一次,这个就比较奇葩了! -->
<!-- <li v-for="(item,index) in courses" :key="index" :class="{active:currentIndex===index}"
@click="select(index)">
{
{ item }}
</li> -->
<li v-for="(item,index) in courses" :key="index"
:style="{'background-color':(currentIndex===index ?'pink':'#CCC')}" @click="select(index)">
{
{ item }}
</li>
</ul>
</div>
<script>
const app = new Vue({
data() {
return {
courses: ['java', 'php', 'c'],
course: '',
currentIndex: 2
}
},
methods: {
addCourse() {
this.courses.push(this.course)
this.course = ""
},
select(index) {
this.currentIndex = index;
console.log("app:" + this)
}
},
}).$mount("#app")
</script>
</body>
</html>
这次,重点回顾,css 写法,和style
:style="{'background-color':(currentIndex===index ?'pink':'#CCC')}"
:class="{active:currentIndex===index}"
以前学习过react ,所以对于这样的写法,我也不会那么的蹩脚,没有多大问题,就相当于写js
:style="{field: value}"
:class = "{className: boolean}"