vue v-for 传值

学习vue框架的第两天，今天主要研究v-for的使用

v-for的一些使用技巧:vue学习——v-for语句_简述v-for指令并写出语法格式-CSDN博客

之前能够获取数值的值，但是不知道如何从中获取一条值。突然受到启发使用参数，然后传值，

具体要求：1：显示上面书籍列表中的所有书籍名称。点击书籍名称显示书籍的具体信息（书名和价格）。鼠标悬停或者点击书名时，有特别的样式
2：只显示价钱在40~50之间的书籍。点击书籍名称显示书籍的具体信息（书名和价格）。鼠标悬停或者点击书名时，有特别的样式

最终结果，如下图

---

---

全部代码贴上

<script src="D:/vue.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<template>
  <div id="app">
    这是一个基本的vue应用
    <ul class = "ul">
      <li class="book" v-for="(item,index) in book" :key="index" @click="getNews(item,index)">
        {{item.bookName}}
      </li>
      </br></br>
    </ul>
    <template v-for="(item,index) in book">
      <a herf="#" class="a" v-if="item.bookPrice >40 && item.bookPrice <50"  @click="getNews(item,index)">
        符合条件的书籍：{{item.bookName}}
      </a>
    </template>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      book:[
        {
          bookName:"三国演义",
          bookPrice:"30"
        },
        {
          bookName:"红楼梦",
          bookPrice:"40"
        },
        {
          bookName:"水浒传",
          bookPrice:"50"
        },
        {
          bookName:"西游记",
          bookPrice:"60"
        },
        {
          bookName:"时间简史",
          bookPrice:"40.5"
        },
        {
          bookName:"鲁滨逊漂流记",
          bookPrice:"55.6"
        },
        {
          bookName:"雾都孤儿",
          bookPrice:"35.2"
        },
      ]
    };
  },
  methods: {
    getNews:function(item,index){
      item.default = true;
      this.bookName = item.bookName;
      this.bookPrice = item.bookPrice;
      alert(this.bookName+this.bookPrice);
    }
  }
};
</script>


<style>
html,
body {
  width: 100%;
  height: 100%;
}
</style><style lang="scss" scoped>
div {
  width: 100%;
  height: 100%;
}
.book{
  list-style-type:none;
  font-weight:bold;
  color:red;
  cursor: pointer;
}
.book:hover {
  background:#dbdbdb;//鼠标悬停时出现一横条背景色
  color:black;//鼠标悬停或者划过时字变成黑色
}
.a{
  cursor: pointer;//悬停时，鼠标变成小手
  color:hsl(256, 85%, 42%);
  text-decoration: none ;
  font-size: 24px;
}
//a标签的四个事件，分别是link(未访问的链接)、visit(已访问的链接)、hover(鼠标移到链接上)、active(选定的链接)
//honver要放在link和visit之后，
//active要放在honver后面
.a:hover {
  background:#dbdbdb;
  color:black;
}
.a:active {
  color: #F0F; //a标签点击后改变原有颜色
}
</style>