[JavaScript知识库]vue中js常用方法 computed watch

在vue中使用js常用方法 有三种方式

1.写在methds里面

首字母大写?
例如:msg.substring(0,1).toUpperCase()+msg.substring(1)

视图部分:

<!-- 首字母变大写 -->
			<h2>{{msg.substring(0,1).toUpperCase()+msg.substring(1)}}</h2>
			<!-- 点击按钮首字母大写 v-on简写为@-->
			<input type="text" v-model="msg2" />//将文本框输入内容首字母大写
			<input type="button" value="首字母大写" @click="run2()"/>{{msg3}}//按键首字母大写

脚本部分:

new Vue({
			//元素
			el:"#app",
			//数据
			data:{
				msg:"abcdefgh",
				msg2:"",
				msg3:""
			},
			//函数
			methods:{
				run2:function(){
					//运算 
		return this.msg2.substring(0,1).toUpperCase()+this.msg2.substring(1);
				}
			}
		})

2.在methods直接return

视图部分:

			<input type="text" v-model="msg2" />
			<!-- 将文本框中首字符大写 利用方法返回值 -->
			利用methods返回值 : {{run2()}}//将msg2的首字母大写

脚本部分:

new Vue({
			//元素
			el:"#app",
			//数据
			data:{
				msg:"abcdefgh",
				msg2:"",
				msg3:""
			},
			//函数
			methods:{
				run2:function(){
					//运算 
		return this.msg2.substring(0,1).toUpperCase()+this.msg2.substring(1);
				}
			}
		})

3.写在计算属性 computed

对于复杂逻辑可以使用computed来完成

例如:msg.substring(0,1).toUpperCase()+msg.substring(1)
写法://计算属性
? ? ? computed:{//采用键值对方式
?? ??? ??? ? ? ?newStr:function(){
?? ??? ??? ??? ? ? ?console.log("计算属性")
?? ??? ??? ??? ? ? ?return this.msg2.substring(0,1).toUpperCase()+this.msg2.substring(1);
?? ??? ??? ? ? ?}
?? ??? ??? ?}

视图部分:

			<!-- 将文本框中首字符大写 利用计算属性 -->
			computed计算属性:{{newStr}}

脚本部分:

		new Vue({
			//元素
			el:"#app",
			//数据
			data:{
				msg:"abcdefgh",
				msg2:"",
				msg3:""
			},
			//计算属性
			computed:{//采用键值对方式
			newStr:function(){
		return this.msg2.substring(0,1).toUpperCase()+this.msg2.substring(1);
			}
			}
		})

计算属性computed和方法method的区别
?? 1.相同点
?? ??? ?如果作为模板数据的展示 两者都能实现相应的功能 唯一不同的是 methods定义的方法需要执行
?? ?2.不同点
?? ??? ?computed会基于相应数据缓存 methods不会缓存
?? ??? ?发生变化之前 先看data里面的数据 是否发生变化 如果没有发生变化 computed方法不会执行 但是method里方法会执行
?? ??? ?computed是属性 method是函数