Vue的常用指令
v-bind:用于绑定属性，通过v-bind:绑定过的属性，可以在属性值可以写表达式
v-bind:可以用:简写
v-on:用于绑定事件，通过v-on:绑定过的事件，可以指定Vue实例定义的方法
v-on:可以用@简写
通过v-model指令，可以实现对数据的双向绑定，v-model指令是 v-bind:value 和 v-on:input 的简写
如果事件方法的代码不是很多，可以写在行内，注意：这里不能写this，$event是事件对象
条件渲染和列表渲染
<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>
img{
width: 500px;
}
</style>
</head>
<body>
<div id="app">
<!-- 根据成绩，显示下面的等级 -->
<h2 v-if="score>=90">优秀</h2>
<h2 v-else-if="score>=80">良好</h2>
<h2 v-else-if="score>=70">中等</h2>
<h2 v-else-if="score>=60">合格</h2>
<h2 v-else>差</h2>
<hr>
<button @click="isShow=!isShow">显示/隐藏</button>
<!-- 每次要根据isShow的值，确定是否渲染页面 -->
<div v-if="isShow">
<img src="图片地址">
</div>
<hr>
<!-- 模板已经渲染成功，通过样式控制显示隐藏 -->
<div v-show="isShow">
<img src="图片地址">
</div>
v-if 和 v-show 如何选择
如果页面需要反复切换显示和隐藏，用v-show。
如果页面中有很多模块需要隐藏，用户可能只对其中的某个模块感兴趣，用v-if，
所有的模块首屏加载时，全部都不渲染，当用户选择指定的模块后，再渲染指定的模块。
<hr>
<ul>
v-for指令，用于列表渲染；类型渲染时，通常都要绑定key，key的作用是提高渲染性能。
注意：key必须是唯一，暂时可以将列表的索引作为key值去使用。
<li v-for="(item,index) in foods" :key="index">{{index}}--{{item.name}}--{{item.price}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
Vue.config.productionTip = false
new Vue({
el:'#app',
//定义数据
data:{
score:55,
isShow:false,
foods:[
{
id:1,
name:'薯片',
price:7.9
},
{
id:2,
name:'饼干',
price:3.9
},
{
id:3,
name:'面包',
price:9.9
},
{
id:4,
name:'蛋糕',
price:16.9
}
]
}
})
</script>
</body>
