v-bind
v-modle底层既用了v-bind:value绑定了数据, 又用v-on:input添加了一个事件监听实现双向数据响应, input 有个 oninput 事件,值一变就触发了func方法
<input type="text" v:bind:value="msg" v-on:input="func()" />
func方法里面改变msg的值
v-bind 指令被用来响应地更新 HTML 属性
v-bind:href 可以缩写为 :href;
<img v-bind:src="imageSrc">
<!-- 缩写 --> <img :src="imageSrc">
我们可以给v-bind:class 一个对象,以动态地切换class。
注意:v-bind:class指令可以与普通的class特性共存
绑定对象和绑定数组 的区别
绑定对象的时候 对象的属性 即要渲染的类名 对象的属性值对应的是 data 中的数据
绑定数组的时候数组里面存的是data 中的数据
绑定style
v-bind:style=“styleObject” 绑定样式对象
styleObject: { color: ‘green’, fontSize: ‘30px’, background:‘red’ },
分支结构 v-if 使用场景
1- 多个元素 通过条件判断展示或者隐藏某个元素。或者多个元素
2- 进行两个视图之间的切换
<div id="app">
<!-- 判断是否加载,如果为真,就加载,否则不加载-->
<span v-if="flag"> 如果flag为true则显示,false不显示!</span> </div>
<script> var vm = new Vue({ el:"#app", data:{flag:true } }) </script>
<div v-if="type === 'A'"> A </div>
<!-- v-else-if紧跟在v-if或v-else-if之后 表示v-if条件不成立时执行-->
<div v-else-if="type === 'B'"> B </div>
<div v-else-if="type === 'C'"> C </div>
<!-- v-else紧跟在v-if或v-else-if之后-->
<div v-else> Not A/B/C </div>
<script> new Vue({ el: '#app', data: { type: 'C' } }) </script>
v-show 和 v-if的区别
v-show本质就是标签display设置为none,控制隐藏
v-show只编译一次,后面其实就是控制css,而v-if不停的销毁和创建,故v-show性能更好一点。
v-if是动态的向DOM树内添加或者删除DOM元素
v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件
循环结构
v-for
用于循环的数组里面的值可以是对象,也可以是普通元素
对象为键值对形式,数组为数组.属性方式
<ul id="example-1">
<!-- 循环结构-遍历数组 item 是我们自己定义的一个名字 代表数组里面的每一项 items对应的是 data中的数组-->
<li v-for="item in items"> {{ item.message }} </li> </ul>
<script> new Vue({
el: '#example-1',
data: { items: [ { message: 'Foo' }, { message: 'Bar' } ], } })</script>
不推荐同时使用 v-if 和 v-for 当 v-if 与 v-for 一起使用时, v-for 具有比 v-if 更高的优先级。
<!-- 循环结构-遍历对象 v 代表对象的value, k 代表对象的 键items ,i 代表索引 从0开始递增--->
<div v-if='v==13' v-for='(v,k,i) in obj'>{{v + '---' + k + '---' + i}}</div>
<script> new Vue({
el: '#example-1',
data: { items: [ { message: 'Foo' }, { message: 'Bar' } ],
obj: {uname: 'zhangsan', age: 13, gender: 'female' } } })</script>
key 的作用
key来给每个节点做一个唯一标识
key的作用主要是为了高效的更新虚拟DOM
<ul><li v-for="item in items" :key="item.id">...</li> </ul>