Vue基础（包括computed与watch）

最新推荐文章于 2025-12-10 10:47:58 发布

原创最新推荐文章于 2025-12-10 10:47:58 发布 · 109 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

Vue 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了Vue的基础知识，包括动态改变标签属性、计算属性、监听属性、class和style的控制、条件渲染以及循环遍历。重点讲解了v-bind、v-model、v-if和v-for指令的使用，以及如何利用computed属性简化计算逻辑和watch进行属性监听。

Vue基础

Vue基础

Vue基础

引入Vue.js

<div id="test">
    //胡子语法
    {{title}}
</div>

<script>
    var app = new Vue({
        //element 第一个元素
       el:'#test'，
       data:{
        title:'hello word'
       }
    })
</script>

一、通过Vue动态改变标签属性

使用v-bind

v-bind:class 可以简写为:class

<div id="test">
    //xy为表达式
    <h1 v-bind:class="'xy'">
        {{title}}
    </h1>
</div>
<style>
    .red{
        color:red;
    }
</style>

<script>
    var app = new Vue({
        //element 第一个元素
       el:'#test'，
       data:{
        title:'hello word',
        xy:'red'
       }
    })
</script>

(3）数据双向绑定

使用v-model

试图更新会影响数据库数据的更新，类似于MVVM，将视图与业务逻辑分开

<div id="test">
    <h1>
        {{title}}
    </h1>
   <input type="text" v-model="title">
</div>

<script>
    var app = new Vue({
        //element 第一个元素
       el:'#test'，
       data:{
        title:'hello word'
       }
    })
</script>

（4）胡子语法加载页面时展示{{}}问题解决

使用v-text属性即可

（5）Vue中使用JS表达式

①在胡子语法中直接使用 {{n+1}}，需在data中设置n的初始值

②在标签内使用 :class=“n+1” 或者v-model=“n” n为字符串需用单引号，变量则不需要

二、Vue计算属性computed

购物车等的计算使用computed属性会比事件监听更方便

<div id="test">
    {{sum}}
    <input type="text" v-model="n1">+
    <input type="text" v-model="n2">=
    <input type="text" v-model="sum">
</div>

var app = new Vue({
    //element 第一个元素
    el:'#test'，
    computed:{
    //es6写法
    	sum(){
    		return this.n1+this.n2;
		}
	//一般写法
    	sum:function(){
    		return this.n1+this.n2;
		}
   },
   data:{
   	n1:0,
    n2:1
   }
})

三、watch监听属性

<div id="test">
    <input type="text" v-model="word">
</div>

var app = new Vue({
    //element 第一个元素
   el:'#test'，
   data:{
   	word:''
   },
   watch:{
     word:function(newV,oldV){
    	console.log(newV);
    	console.log(oldV);
	}            
   }
})

使用lodash减少watch对后台请求的压力

先引入lodash.js，使用.debounce(方法，时间)，间隔多长时间进行一次监听

四、使用object与array控制class

<style>
    .color{
        color:red;
    }
    .font{
        font-size:10px;
    }
</style>
<div id="test">
    //第一种方法，可写多个
    <h1 :class="{color:true}">
        你好，小鱼
    </h1>
    <h1  :class="color">
        你好，小鱼
    </h1>
    //第二种方法
    <h1  :class="['color','font']">
        你好，小鱼
    </h1>
</div>

var app = new Vue({
    //element 第一个元素
   el:'#test'，
   data:{
   	color:{
    	color:true,font:true
	},
   },
})

五、class中的应用表达式

:class="表达式:'为true时的类':'为false时的类'"

六、使用Vue控制style样式属性

:style="{样式名:'字符串'或者变量}或者{变量}"
:style="[]"

七、v-if与v-show

控制元素的显示与隐藏

v-if v-else-if v-else（写在标签里）与 if elseif else 类似（写在方法里）

v-if：隐藏时删除dom元素；

v-show：隐藏时不删除，添加dispaly：none；性能更好。

八、v-for

可直接操作数值：v-for=“item in 20”

key:数组序号，按需决定

v-for="(item,key) in/of 数组名" //写在需要循环的标签里

v-for操作数组与对象

操作对象：v-for=“(item,key,index) in 对象名” 其中item为对象的值，key对应对象的key，index为对象下标

v-for与computed结合使用