1.v-model 修改一处属性时页面数据会随之变换
<div id="app">
<h1>{{massage}}</h1>
<input type="text" v-model="massage">
</div>
<script>
//1.
let vm = new Vue({
el:"#app",
data:{
massage:'Hello word I\'am vue.js'
}
})
</script>
2.v-once 原始值不会改变的值
<!--//v-once--> <div id="app"> <p v-once>原始值:{{msg}}</p> <p>后面的:{{msg}}</p> <input type="text" v-model="msg"> </div> <script> new Vue({ el:"#app", data:{ msg:'今天还是要赚钱' } }) </script>3.v-if 满足条件时显示 不满足条件的数据不会被创建出来
<div id="app"> <p v-if="show">要显示的</p> <p v-if="hide">不显示的</p> <p v-if="height > 170">身高{{height}}</p> <p v-if="height < 170">身高{{height}}</p> </div> <script> new Vue({ el:"#app", data:{ show:true, hide:false, height:180 } }) </script>4.v-show 通过display:none来隐藏 条件不满足的会通过css来隐藏但是会创建出来
<div id="app"> <p v-show="show">要显示的</p> <p v-show="hide">不显示的</p> <p v-show="height > 170">身高{{height}}</p> <p v-show="height < 170">身高{{height}}</p> </div> <script> new Vue({ el:"#app", data:{ show:true, hide:false, height:180 } }) </script>5.v-else 需要配套v-if执行如
<div id="app"> <p v-if="height > 170">小明的升高是:{{height}}cm</p> //如果条件达成实现这条代码 <p v-else>小明的升高是:{{height}}cm</p> //否则的话执行v-else </div> <script> new Vue({ el:"#app", data:{ height:168, } }) </script>6.v-else v-esle-if 配合使用判断条件
<div id="app"> <p>输入成绩对应的等级是:</p> <p v-if="score > 100 || score < 0">请输入正确的成绩</p> <p v-if="score >= 90 || score = 100">优秀</p> <p v-else-if="score >= 75">良好</p> <p v-else-if="score >= 60 ">及格</p> <p v-else>不及格</p> <input type="text" v-model="score"> </div> <script> new Vue({ el:"#app", data:{ score:90, } }) </script>
7.v-for 可以循环遍历
<div id="app"> <p v-for="(score,index) in score"> <!--v-for 遍历方式--> {{index +':'+ score}} </p> <p v-for="d in dog">{{d}}</p> <p v-for="str in name">{{str}}</p> <p v-for="tel in phone">{{tel}}</p> </div> <script> new Vue({ el:"#app", data:{ score:[100,80,75], dog:{ name:'xz', age :18, height:130, }, name:'zhangsan', phone:'18000000' }, }) </script>
v-for小练习表格
<!-- v-for循环表格插件 --> <div id="app"> <table> <thead> <tr> <td>姓名</td> <td>年龄</td> <td>性别</td> </tr> </thead> <tbody> <tr v-for="p in Person"> <td>{{p.name}}</td> <td>{{p.age}}</td> <td>{{p.sex}}</td> </tr> </tbody> </table> </div> <script> new Vue({ el:"#app", data:{ Person:[ {name:'男1',age:18,sex:'男'}, {name:'女1',age:18,sex:'女'}, {name:'男2',age:18,sex:'男'}, {name:'女2',age:18,sex:'女'}, {name:'张路',age:18,sex:'男'} ] } }) </script>
v-text 区别与直接在标签内输入{{xx}} v-text引入的数据在 标签内添加数据无效
v-html 也不可以在标签内添加文本
<!--//v-text--> <div id="app"> <p v-text="msg"></p> <p v-html="html"></p> </div> <script> new Vue({ el:"#app", data:{ msg:'今天还是要赚钱', html:'<input type="data"> <input type="color"> ' } }) </script>v-vind 绑定图片
<div id="app"> <img v-bind:src="imgSrc" :alt="alt"> <img :src="imgSrc" alt=""> </div> <script> new Vue({ el:"#app", data:{ imgSrc:'img/01.png', //绑定图片 alt:'我是桌面' } }) </script>
<!-- v-bind练习 --> 绑定索引class 以及绑定样式 <style> .active{ background-color:yellow; } </style> <div id="app"> <ul> <li v-for="(sc,index) in school" :class="index === activeIndex ? 'active' : ''">{{sc}}</li> </ul> <p :style="{color:fontColor}">aa啊啊啊啊</p> </div> <script> new Vue({ el:"#app", data:{ school:[ 'school1', 'school2', 'school3', 'school4', 'school5', 'school6', 'school7', ], activeIndex:2, fontColor:'red', } }) </script>v-on绑定事件
<!--i-on 绑定事件--> <div id="app"> <p :style="{color:fontColor}">{{msg}}</p> <button v-on:click="msg = '今天没面试'">改变内容</button> <button @click="changeContent()">点击</button> <button @click="changeContentColor()">点击</button> </div> <script> new Vue({ el:"#app", data: { msg: '今天还是要赚钱', fontColor: 'red', }, methods:{ //实例的所有函数实现 changeContent(){ //alert(0); this.msg = 'test text' }, changeContentColor(){ this.fontColor = 'green' } } }) </script>