1. 数据展示v-html和v-text
<div v-text = 'content'>被覆盖的文字</div>
<div v-html = 'content'>被覆盖的文字</div>
data: {
content: '<button>按钮</button>'
}
如图:
v-html覆盖了标签内原有内容,并且解析了富文本渲染出的是一个按钮;
v-text也覆盖了标签原有内容,但没有解析富文本;
v-html和v-text的异同(vue的指令)
ⅰ. 相同点:都可以覆盖元素的原内容
ⅱ. 不同点:v-html可以解析富文本;v-text不能(富文本:是一个字符串,包括标签和属性)
属性的绑定v-bind
若属性的值要求为变量时,可以用v-bind来绑定属性
v-bind:属性
简写
:属性
属性值可以是表达式,也可以调用定义好的方法,拿到的是方法的返回值
<div :style="css">hezi</div>
<p v-bind:class="red()">
若属性的值要求为变量时,可以用v-bind来绑定属性
v-bind:属性
或简写:
:属性
属性值可以是表达式,也可以调用定义好的方法,拿到的是方法的返回值
</p>
data:{
css:'color:red;font-size:20px'
},
methods:{
red(){
return 'red'
},
}
事件的绑定v-on
v-on 事件的绑定 简写 @
v-on:事件类型=“方法名”
@事件类型=“方法名”
<button v-on:click="log">按钮</button>
<!-- 简写 -->
<button @click="log">按钮</button>
methods:{
log(){
console.log(this.value);
}
}
数据双向绑定v-model
针对表单控件,,可以获取绑定元素的value值,例如:将data的数据与input输入框的值绑定,当一方发生更改时也会随之渲染。
原理
采用数据劫持结合发布者-订阅者模式的方式, 通过Object.definieProperty()来劫持各个属性的setter和getter,在数据变动时发布消息给订阅者,触发相应的监听来渲染视图。
遍历渲染v-for
a. 遍历数组 v-for =‘(item,index) in arr’
b. 遍历对象 v-for =‘(value,key,index) in obj’ :key=“”
c. 遍历数字 v-for =‘num in 10’
<!-- 遍历数组 -->
<div v-for="(item,index) in list" :key="index">
{{item}}----{{index}}
</div>
<!-- 遍历对象 -->
<div v-for="(value,key,index) in obj" :key="index">
{{key}}----{{value}}----{{index}}
</div>
<!-- 遍历数字 -->
<div v-for="num in 6" :key="num">
{{num}}
</div>
list:[1,2,3,4],
obj:{
id:1,
name:'z',
age:18,
},
v-for必须搭配key属性使用
:key=""
key必须是数字或字符串
key必须是唯一值
key的作用:提升重排效率,方便就地复用(diff算法)
显示隐藏v-if 和v-show
值为true显示,为false隐藏
<div :class="['css1','hw']" v-if="true"></div>
<div :class="['hw','css2']" v-show="flase"></div>
v-if 和v-show的异同
a. 相同点:都能通过设置属性值为true/false对元素进行显示和隐藏
b. 不同点:v-if是通过删除DOM元素来进行隐藏,v-show是通过display:none来进行元素的隐藏
c. 应用场景的不同:v-if用于一次或少次的切换,v-show用于频繁的切换现实和隐藏
扩展
<!-- v-else v-else-if -->
<div v-if="age<18">未成年</div>
<div v-else-if="age<30">成年</div>
<div v-else-if="age<60">中年</div>
<div v-else>老年</div>