模板语法：https://cn.vuejs.org/v2/guide/syntax.html#Attribute

{'another'：item.age>29}

li标签下面还有一个li标签是什么意思？

可以像这样写的：

<li v-for="item in list1" v-if="item < 5">

          {{item}}

</li>

我晓得了，可以使用属性，自定义data的属性

1. 在ES5语法下面，直接使用cdn的方式引入 vue.js，然后就直接可以写Vue相关的语法了（ES5）

2. 如果需要使用vue文件（ES6语法），你就需要类似webpack+babel这一类的打包工具了，它们提供了转义与打包的基础功能。

参考链接：

vue起步

cli服务

如何在传统项目中使用cli或者说使用vue文件呢？

很简单，配置一个webpack配置就行了。

基本的流程如下：

npm init初始化一个项目

添加webpack.config.js配置，添加babel + vue loader，

使用webpack命令进行调试与打包。

参考链接 ：

vue + webpack4配置

vue template  这个可能会被deprecated掉，所以只有参考 学习的作用，建议使用cli工具。

哈哈，来来来，逻辑问题，别把自己绕进去了。

你说的对，if条件不满足就会输出else中的，这就是If else条件渲染。

那我们来看看我们的例子：

<div v-for="item in list">
  <div v-if="item.age > 29">
    {{item.name}}
  </div>
  <div v-else>
    {{item.age}}
  </div>
</div>

先不看外层的for循环，单纯看里面的逻辑：

如果item的属性age大于29，就输出item的name属性；

否则（item的属性age小于等于29），就输出item的age属性；

好，现在我们来看看list这个对象里面有什么：

list: [{
  name: 'liwei',
  age: 29
},{
  name: '小张',
  age: 30
}]

有两个对象对不对？

第一个对象：

{
  name: 'liwei',
  age: 29
}

来判断一下，age大于29吗？否，输出：29（age属性）

第二个对象：

{
  name: '小张',
  age: 30
}

来判断一下，age大于29吗？是，输出：小张（name属性）

如果要渲染style，需要这样写

<div :style="{'color': styMsg}"></div>

如果需要使用class的方法绑定，那就直接写上去，不需要vue

<div class='styMsg'></div>

style部分：

.styMsg {

    color: red;

}

额，我写成v-if-else了，应该是v-else-if,一片乌鸦飞过。。。。。。。。。。

您好，欢迎关注，

有多种做法，楼上同学的方法也是可行的，不过不方便阅读与修改，建议使用class进行样式的管理。

首先，Class与Style绑定中，Style的绑定要使用驼峰写法。

如：

:style="backgroundColor: red"

其次，在App.vue组件中，可以对组件加入样式，写在<style lang="scss">// 样式写在这里</style>

谢谢您的宝贵评价！我会在今后的免费课中，优化内容，给大家更多干货。

三人行必有我师，一方面考虑基础一般的同学； 一方面考虑要把知识点讲清楚，其实是很不容易的事情。

我相信，如果基础好的同学，以2倍速看一遍的话，温故而知新，一定会有收获的。