区别:
v-if,v-else-if,v-else相当于DOM元素的添加删除
v-show控制元素的渲染，显示或者不显示
v-show的性能开销小
写法上v-if更简单,但是性能开销上v-show更小一些
computed里面得方法用于计算属性值,当拿到数据后,对数据进行二次处理,然后绑定到对应得dom节点上,里面得方法必须要有返回值
watch:监听dom元素,当某个dom元素法生改变得时候,进行得一系列操作,里面得方法没有返回值
watch更消耗性能
实现代码:
<template>
<div style="margin-left:30px;margin-top:30px;">
<h1>666</h1>
<div>
<div v-if="no>=5">ce1</div>
<div v-else>ce2</div>
<div>ce3</div>
<br/>
等级
<div v-if="cj>=90">一级</div>
<div v-else-if="cj>80">二级</div>
<div v-else-if="cj>70">三级</div>
<div v-else>四级</div>
<br/>
等级show
<div v-show="cj>=90">一级</div>
<div v-show="cj<90 & cj>=80">二级</div>
<div v-show="cj<80& cj>=70">三级</div>
<div v-show="cj<70">四级</div>
</div>
<br/>
<!-- 计算 -->
{{no+3}}
<!-- 三目运算 -->
{{flag?"true":"false"}}
<!-- vue调用javascript的方法-->
{{message.split("").reverse().join("")}}
<!-- 计算属性 -->
{{GetMsssage}}
<button @click="UpdateMessage()">改变属性值</button>
<br/>
<input type="text" v-model="keyword" placeholder="请输入关键字"/>
<ul>
<li v-for="(item,index) in GetList" :key="index">
{{item}}
</li>
</ul>
<!-- watch监听 -->
<br/>
<input type="text" v-model="firstname" placeholder="请输入关键字"/>-
<input type="text" v-model="lastname" placeholder="请输入关键字"/>
<br/>
{{funnname}}
</div>
</template>
<script>
export default {
name: "AppA6",
data() {
return {
no:5,
cj:80,
flag:false,
message:"123456",
list:["123","456","789","qwe","rty"],
keyword:'',
firstname:'',
lastname:'',
funnname:'',
};
},
components: {
},
methods: {
UpdateMessage(){
this.message="rty"
},
},
computed:{//用计算属性实现监听数据变化,必须要有return返回值,计算从第一次返回数据开始
GetMsssage(){
return this.message.split("").reverse().join("");
},
GetList(){//按计算属性实现筛选功能
var temp=[];
this.list.forEach((value)=>{
if(value.indexOf(this.keyword)!=-1&this.keyword!=''){
temp.push(value)
}
})
return temp;
}
},
watch:{//使用watch进行监听,当dom元素法生变化得时候才执行,没有返回值，要发生对应得dom节点变化才执行
firstname:function(value){
this.funnname=value+this.lastname;
},
lastname:function(value){
this.funnname=this.firstname+value;
}
},
mounted() {},
};
</script>
<style>
</style>