框架小白白白白的进阶之路 --- Vue（三）方法、计算属性和监听器

最新推荐文章于 2023-09-28 19:22:10 发布

兜里ヌ有糖

最新推荐文章于 2023-09-28 19:22:10 发布

阅读量115

点赞数

分类专栏：笔记文章标签： vue java

本文链接：https://blog.csdn.net/qq_43980232/article/details/107778928

版权

笔记专栏收录该内容

60 篇文章 0 订阅

订阅专栏

方法和计算属性

methods：`方法`

正如他的名字一样，它们是挂载在对象上的函数，通常是Vue实例本身或Vue组件。
当data值改变时，重新渲染页面，页面的method方法会被调用（有触发条件的除外）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
		
	</head>
	<body>
		<div id="app">
			<div id="">{{msg}}</div>
			<div id="">{{price()}}</div>
			<div id="">{{p()}}</div>
			<button @click="add()">增加</button >
		</div>
		<script type="text/javascript">
			let demo=new Vue({
				el:"#app",
				data:{
					msg:'总金额：',
					package:{
						count:4,
						price:5
					}
				},
				computed:{
					
				},
				methods:{
					add:function(){
						this.package.count++
					},
					price:function(){
						console.log("price");
						return this.package.count*this.package.price
					},
					p:function(){
						console.log("bbbbbbb")
					}
					
				}
			})
		</script>
	</body>
</html>

如上程序，在进行页面渲染时，会自动调用price（）和p（），不会调用add（）（有触发条件：@click）

computed：`计算属性`

是计算属性，但不是方法（写法与方法类似），它可以用来监视对data数据（与其关联的数据）的改变，当data中的数据发生改变时，会触发与其关联的计算属性

注意事项

计算属性是属性，不是方法，调用时不能写（）
计算结果会缓存到 Vue对象中（存储在计算属性里）
计算属性内部不能调用自己（this.***），会发生递归死循环
当计算属性内涉及到的data值发生改变时，就会触发计算属性
当data值发生改变时，就会立刻触发计算属性,而不是等到方法运行结束后才触发计算属性
计算属性只能通过get方法获得值，没有set方法不能进行赋值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="demo">
        <p>原数据{{message}}</p>
        <p>反转后的数据{{reversedMessage}}</p>  
        <button @click="add()">补充货物1</button><!--add()定义在methods内，只有满族触发条件（这里是click事件）时才会调用-->
        <div>总价为：{{price}}</div><!--reversedMessage、price都定义在computed内，是计算属性-->
        <!--在页面初始化时自动调用，当与其关联的某一个data值（比如price计算属性关联的count或price值）发生改变时，也会重新调用该函数-->
    </div>
    <script>
        var demo = new Vue({
              el: '#demo',
              data: {
                message :'abcdefg',
                package: {
                    count: 5,
                    price: 5
                },
              },
              computed:{
                  reversedMessage:function(){
                      return this.message.split('').reverse().join('')
                  },
                price: function(){
                     return this.package.count*this.package.price　　
                 }
            },
             methods: {   
                add: function(){
                    this.package.count++   // 当data值发生改变时， 就会立刻触发计算属性,而不是等到方法运行结束后才触发计算属性
                }
            }    
        })
    </script>    
</body>
</html>

watch`监听器`

可以监听对应值的变化，无论是表单输入、异步更新还是动画，对于任何发生变化了的东西都有用。回调函数中，第一个参数为新值，第二个参数为旧值

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>vue</title>
   <script src="./js/vue.js"></script>
</head>
<body>
 <div id="demo">
       <button @click='a++'>a加1</button>
       <input type="text" v-model="a">
       <p>{{message}}</p>
   </div>
   <script>
       var demo = new Vue({
             el: '#demo',
             data: {
               message :'',
               a:1
             },

             watch:{
             　　a:function(val,oldval){ //此处的a为要监听的属性（data里的属性a）
               　　 this.message = 'a的旧值为' + oldval + ',新值为' + val;
             　　}
           }
       })
   </script>
</body>
</html>

点击一次a加1后显示如下
对数组进行监听

var vm = new Vue({
      el: '#app',
      data: {
        list:[
          {val: ''},
          {val:''}
        ]
      },
      watch: {
        list:{
          handler: function (val, oldVal)                             {
            alert('数据改变了');
          },
          deep: true
        }
      },
    })

对于复杂的对象类型监听

使用watch的handler可以监听对象中任意一个属性的变化，但是要注意，过去的旧值和新值都是同一对象(新值)
如果想要对对象中的某一个确定属性进行监听，我们需要借助于computed，写一个对应属性的计算属性，然后在watch中监听这个对象属性，即可同时获取新值和旧值

双向绑定(v-model)

v-model.lazy
可以使input输入框不会每打一个字就同步一次data的数据变化，而是直到输入框失去焦点时，才会进行data的数据同步
v-model.number
确保input输入框最后获取到的数据是number(数字)类型
v-model.trim
输入过滤，去掉input输入框中输入的数据首尾的空格(不能去除中间的空格)

过滤器

过滤器分为全局过滤器和局部过滤器
全局过滤器必须写在vue的vm对象前面，对全部的vm对象生效（整个页面的标签都可以用）
局部过滤器是写在vm对象内部的，只对当前的vm对象生效（只有被当前vm对象包含的标签才可以用）

定义方式
Vue.filter(name,function(value){})

调用方式
{{value|name}}
可以调用多个过滤器(过滤器链)
{{value|name|name}}将左侧过滤器的结果，作为右侧过滤器的value值

过滤器传参数
Vue.filter(name,function(value，a,b){})
a,b就是传递进来的参数
调用
{{value|name(a,b)}}
注意，value必须是第一个，从第二个开始才是传递进来的参数

兜里ヌ有糖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
框架小白白白白的进阶之路 --- Vue（三）方法、计算属性和监听器

方法和计算属性methods：方法正如他的名字一样，它们是挂载在对象上的函数，通常是Vue实例本身或Vue组件。computed：计算属性是计算属性，但不是方法（写法与方法类似），它可以用来监视对data数据（与其关联的数据）的改变，当data中的数据发生改变时，会触发与其关联的计算属性注意事项计算属性是属性，不是方法，调用时不能写（）计算结果会缓存到 Vue对象中（存储在计算属性里）计算属性内部不能调用自己（this.***），会发生递归死循环当计算属性内涉及到的data值发生改变时，
复制链接

扫一扫