vue的使用，定义数据，条件

1、首先使用vue,先引入它到我们要渲染的页面，这里用官方的cdn地址<!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 生产环境版本，优化了尺寸和速度 --><script src="https://cdn.jsdelivr.net/npm/vue"></script>

2、首先我们在模版中创建一个vue应用vue其实本质也是js,所以要写在script脚本里面html部分：<div id="app" style="heig茑霁酌绡ht: 100px;width: 100px;font-size: 25px" > <p>名字:{{ name }}</p> <p>爱好:{{ interest}}</p></div>vue应用创建：<script> var app = new Vue({ el: '#app', data: { name: 'name', interest: 'playgame', } })</script>打开这个页面，我们发现，data里面的属性被渲染到html模版上面了

3、vue条件循环使用vue可以定义for循环，if条件var app = new Vue({ el: '#app', data:{ user:['张三','lisi','vue'], interest: 'playgame', }, methods: { ceshi: function () { console.log(123) } }})首先定义一个应用data里面传入个列表 user模版中：<div id="app"> <p v-for="u in user">用户:{{ u }}</p></div>

4、使用vue的循环条件和if条件<script> var app = new Vue猾诮沓靥({ el: '#app', data:{ user:['张三','lisi','vue'], interest: 'playgame', }, methods: { ceshi: function () { console.log(123) } } }) function mytest() { console.log(name) }</script>vue应用创建，修改模版条件<div id="app"> {{ user }} <p v-for="u in user" v-if="u == '张三'">用户:{{ u }}</p></div>模版刷新会发现只有张三的被渲染出来

5、vue的for循环取索引和值<script> var app = new Vue({ el: '#app', data:{ user:['python','lisi','vue','my','c++'], interest: 'playgame', }, })</script>模版也做下修改：<div id="app"> {{ user }}<p v-for="(u,index) in user" >第{{index}}个用户:{{ u }}</p></div>刷新模版得到如下所示：