<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .red{ color: red; } .green{ color: green; } </style> </head> <body> <div id="app"> <h2>v-pre</h2> <h2 v-pre="msg">{{msg}}</h2> <h2 v-once>{{msg}} v-once 不能改变</h2> <input type="text" v-model="msg"><br> <em>{{msg}}</em> <h2>v-bind</h2> <h2 v-bind:class="g">V-bind demo</h2> <h2 v-bind:class="{red:off}">接收判断条件</h2> <h2 v-bind:class="{r,g}">{r:r, red:red}</h2> <h2 :class="[r,g]">绑定数组</h2> <h2 :class="off ? 'red':'green'">三元表达式</h2> <!--把数据插入到APP作用域下,需要用到插值符号{{ }} ${变量}--> <h2>得分:{{num}}</h2> <button v-on:click="jia">加一分</button><br> <button @click="jian">减一分</button><br> <input v-on:keyup.13="onEnter" value="回车键"/> <input v-on:keyup.enter="onEnter" value="回车键"/> {{msg}} <h2 v-text="vText"></h2> <h2 v-text="vText2"></h2> <h2 v-html="vText2"></h2> <h2 v-show="isShow">{{vText2}}</h2> <hr> <h2>v-if 没有dom</h2> <div v-if="isLogin">请输入你的用户名</div> <div v-else="isLogin">用户名:姚辉乾</div> <hr> <h2>v-for循环</h2> <ul> <li v-for="item in arr">{{item}}</li> </ul> <hr> <h2>显示前三行</h2> <ul> <li v-for="(item,index) in arr" :key="index" v-if="index<3"> {{index}}+++{{item}}</li> </ul> <h2>循环显示对象</h2> <ul> <li v-for="(item,index) in uesr" :key="index" v-if="index<3"> {{index}}+++{{item.name}}+++{{item.age}}</li> </ul> <hr> <ul> <li v-for="(value,key,index) in uesra" > value:{{value}}, key:{{key}}, index:{{index}} </li> </ul> <h2>循环sortArr </h2> <ul> <li v-for="site in sortArr">{{site}}</li> </ul> </div> <script src="../js/vue.js"></script> <script> // MVVM new Vue({ el:"#app", data:{ //请求过来的数据,都会放到data里面 msg:'helloworld', r:'red', g:'green', off:false, vText:'姚辉乾', vText2:'<em>姚辉乾</em>', isShow:true , isLogin:false , arr:[123,456,789,123456,789456,123123], uesr:[ {name:'姚辉乾1',age:20}, {name:'姚辉乾2',age:21}, {name:'姚辉乾3',age:22}, {name:'姚辉乾4',age:23} ], uesra:{ name:'追梦', age:'222', home:'菏泽' }, num:0 }, computed:{//计算属性,实时更改 用js的sort排序 sortArr:function(){ console.log("yhq") console.log(this.arr) return this.arr.sort(function(a,b){ // return a-b;//从小到大 return b-a;//从小到大 }) } }, methods:{ jia() { this.num++; }, jian() { this.num--; }, onEnter(){ this.num++; } } }); </script> </body> </html>
vue 指令全集
猜你喜欢
转载自blog.csdn.net/qq_33026699/article/details/81628808
今日推荐
周排行