【关于Vue的常用语法②】

最新推荐文章于 2024-09-11 11:57:35 发布

RORONOA~ZORO

最新推荐文章于 2024-09-11 11:57:35 发布

阅读量126

点赞数

分类专栏： vue常用语法文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/jj16165858/article/details/126181288

版权

vue常用语法专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、Vue.js实现留言板功能：

请添加图片描述
例如上图：

实现input框输入内容点击留言，渲染到dom中，然后在input搜索框输入内容实现搜索功能，最后给点击删除button按钮添加删除功能。

好了下面直接上代码了。
记得引入vue.js

<div id="app">
	<div>
		<span>
			姓名：<input type="text" v-model="name"> <!--双向数据绑定-->
		</span>
		<span>
			内容：<input type="text" v-model="text">
		</span>
		<button @click="add()">点击留言</button>
		<!-- 计算属性 -->
		搜索：<input type="text" v-model="sousuo"> 
	</div>
			        
	<ul>
		<li v-for="(item,index) in jj" :key="index">
			姓名：{{item.name}} 
			内容：{{item.text}}
			<button @click="remove(index)">删除</button>
		</li>
		<li v-if="mes.length==0">当前没有对应记录</li> 
	</ul>
</div>

<script type="text/javascript">
	let vn=new Vue({
		el:"#app",
		data:{
			mes:[
				{name:"王稿子",text:"来踩踩"},
				{name:"法外狂徒张三",text:"想宰羊"},
				{name:"纵火狂魔李某",text:"烤羊肉吃吗"},
				{name:"猥琐人赵某",text:"你长得好漂亮"},
				{name:"神经病刘某",text:"啊哈哈嘿嘿嘿"},
			],
			name:"",
			text:"",
			sousuo:""
		},
		methods:{
			add(){
				//点击添加留言
				//要获取对应的名字和内容
				if(this.name==""||this.text==""){
					return
				}else{
					this.mes.push({name:this.name,text:this.text})
				}
				//点击添加留言之后清除框内内容
				this.name=""  
				this.text=""
			},
			remove(index){
				//让当前对应的数据在数组中直接删除
				this.mes.splice(index,1)
			}
		},
		//计算属性
		computed:{
			jj(){
                //根据 this.sousuo 对 this.mes进行对应的过滤 找到其中符合要求的元素
                //str.includes(XXX)判断str是否具有xxx对应的子串 空字符串是任意字符串的子串
				let result=this.mes.filter(item=>item.text.includes(this.sousuo))
				return result
			}
		}
	})
</script>

二、计算属性

上面的小案例用到了计算属性，怎么用看如下代码

<div id="app">
	<p>
		姓：<input type="text" v-model="first">
	</p>
	<p>
		名字：<input type="text" v-model="lsat">
	</p>
	{{allName}}
</div>
<script type="text/javascript">
	let vn=new Vue({
		el:"#app",
		data:{
			first:"",
			lsat:""
		},
		computed:{
			allName(){
				return this.first+this.lsat
			}
		}
	})
</script>

上次用过 el 它是用来绑定dom 、data绑定的数据、methods绑定的方法、computed就是计算属性了，它是通过原本属性进行计算产生一个新的属性，也是属于一个方法。
随便起个名**{{allName}}在v-model后面给个名first和lsat**，在data里赋值为空，最后在computed里然后给个allName方法然后在里面计算，allName 在computed 里就变成方法了。
实现结果如下：
在这里插入图片描述
就这个意思！

三、购物车加减计算

举个小小的计算例子：
在这里插入图片描述
点击- 数量–，点击+数量++，总数量会显示合计价格也会显示。下面就上代码了。

       <div id="app">
			<ul>
				<li v-for="(item,index) in goodsList" :key="item.id">
					名称：{{item.name}}
					单价：{{item.price}}
					数量：
					<button @click="add(index)">-</button>
					 &nbsp {{item.count}} &nbsp 
					<button @click="bdd(index)">+</button>
					小计：{{item.count*item.price}}
				</li>
				<li>
					<!-- 计算属性 -->
					<p>总数量：{{total}}</p>
					<p>合计：&nbsp &nbsp  {{allPrice}}</p>
				</li>
			</ul>
		</div>
		<script type="text/javascript">
			let vn=new Vue({
				el:"#app",
				data:{
					goodsList:[
						{id:1,name:"鞋子",count:1,price:100},
						{id:2,name:"上衣",count:1,price:200},
						{id:3,name:"裤子",count:1,price:150},
						{id:4,name:"内衣",count:1,price:30},
					]
				},
				methods:{
					bdd(index){
						this.goodsList[index].count++
					},
					add(index){
						if(this.goodsList[index].count==0){
							return
						}
						this.goodsList[index].count--
					}
				},
				//计算属性
				computed:{
					total(){      //方法
						let sum=0
						this.goodsList.forEach(item=>{
							sum+=item.count
						})
						return sum
					},
					allPrice(){   //方法
						let sum=0
						this.goodsList.forEach(item=>{
							sum+=item.count*item.price
						})
						return sum
					}
				}
			})
		</script>

很简单一个东西，没事多练习练习吧。

四、watch监听选项

watch 选项：监听选项对vue中某一个数据进行监听，当数据发生变化时，执行对应函数
watch和计算属性的区别：
1.watch 不产生新的属性只是在原有的内容进行更改
computed 利用原本属性产生一个新的属性
2.computed 用于基本永远有数据可以直接计算出来的内容计算属性中通常写的都是简单的逻辑一些基本的计算和对应的判定
watch 用于复杂逻辑搜索！input框值发送变化时，Ajax请求，当数据变化
实现功能较为复杂时，使用watch,watch不是只对属性服务，也可以写多种操作。
例如实现一下功能：
20度以上提示穿短袖，10-20度长袖，0-10度外套，0度一下棉衣
在这里插入图片描述
先简单写一下dom页面

        <div id="app">
			<p>
				当前温度：
				<button @click="add()">-</button>
				{{temperature}}
				<button @click="bdd()">+</button>
			</p>
			<p>
				建议穿衣指数：{{dress}}
			</p>
		</div>

再来js

            let vn=new Vue({
				el:"#app",
				data:{
					temperature:20,
					dress:"可以穿短袖"
				},
				methods:{
					add(){
						this.temperature--
					},
					bdd(){
						this.temperature++
					}
				},
				watch:{
					temperature(){
						if(this.temperature>20&&this.temperature<=40){
							this.dress="可以穿短袖"
						}else{
							if(this.temperature>40){
								this.dress="可以逃离地球了"
							}else{
                            if(this.temperature<=20&&this.temperature>=10){
									this.dress="长袖"
								}else{
                            if(this.temperature<10&&this.temperature>=-10){
										this.dress="外套"
									}else{
                           if(this.temperature<-10&&this.temperature>=-15){
											this.dress="有点冷穿棉衣吧"
										}else{
                            if(this.temperature<-15&&this.temperature>-25){
												this.dress="可以逃离地球了"
											}
										}
									}
								}
							}
						}
					}
				}
			})

就上面的逻辑写的有点长了凑活看吧哈。

五、set方法(重要)

在这里插入图片描述
例如先遍历一个数组，点击input改变第二个内容。

		<div id="app">
			<ul>
				<li v-for="(item,index) in lists" :key="index">
					{{item}}
				</li>
				<button @click="change()">改变第二个元素</button>
			</ul>
		</div>
		<script type="text/javascript">
			let vn=new Vue({
				el:"#app",
				data:{
					lists:[1,2,3,4],
				},
				methods:{
					change(){
						Vue.set(this.lists,1,10) 
		</script>

在这里插入图片描述
vue动态响应，当改变数组中的内容时，响应取消
当改变复杂元素中的内容时，不会自动渲染
vue保留了一个名为set的方法，帮助用户在更改复杂内容的同时，也可以渲染
再举个对象的例子：

点击input 改变第一行第二个内容并增加一个

		<div id="app">
			<ul>
				<li v-for="(item,index) in obj" :key="index">
					{{index}}
					{{item}}
				</li>
			</ul>
			<button @click="change()">改变第二个元素</button>
		</div>
		<script type="text/javascript">
			let vn=new Vue({
				el:"#app",
				data:{
					obj:{
						name:"王一",
						age:2,
						color:"红色"
					}
				},
				methods:{
					change(){ 
						//增加
						this.obj.name="王二" //bug先改在增加就可以直接用 不然只能用set
						// this.obj.height=180
						Vue.set(this.obj,"height",180)
					}
				}
			})
		</script>

在这里插入图片描述
Vue类中静态方法；1.操作的元素、2.操作的索引值、3.改变的结果

六、v-once 取消双向绑定

v-once 绑定给指定标签作用的标签只渲染一次包括内部数据及结构
例如下面这个样子，初始是一样的但是里面内容改变外部的dom不会改变
在这里插入图片描述
input标签双向绑定之后，在p标签内添加一个 v-once 就会取消双向绑定了

        <div id="app">
			<input type="text" v-model="mes">
			<p v-once>{{mes}}</p>
		</div>
		<script type="text/javascript">
			let vn=new Vue({
				el:"#app",
				data:{
					mes:"hello world"
				}
			})
		</script>