事件、样式绑定、条件渲染、循环渲染-vue2

十二

已于 2022-08-31 12:42:42 修改

阅读量236

点赞数

分类专栏： vue2 文章标签： javascript 前端 vue.js

于 2022-08-31 12:02:44 首次发布

本文链接：https://blog.csdn.net/qq_47455650/article/details/126613383

版权

vue2 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章目录

事件
样式绑定
- 1 、对class 属性进行绑定
- 2、对style 进行绑定
条件渲染
- v-if /v-else 或者 v-show
循环渲染

事件

1.方法的写法

在methods中写方法,供事件或者别的方法内部调用
方法的写法:由于是做了es6语法处理的所以学过的所有方式的写法都行

new Vue({
  el:"#app",
  data:{},	
  methods:{
      fn1(){console.log("fn1")},
      fn2:function(){console.log("fn2")},
      fn3:()=>{console.log("fn3")},
      fn4(){
           this.fn3()},
      fn5,
      fn6					
    }
})

2.事件绑定

//v-on: 和  @ 都是绑定事件的指令
//指令后面跟事件类型,值就是methds中的方法,可以加小括号也可以不加
<button v-on:click="fn1()">点击事件1</button>
<button @click="fn2">点击事件2</button>

3.事件修饰符

.stop 阻止冒泡，阻止从当前元素经过的所有冒泡行为
.prevent 阻止默认事件
.capture 添加事件侦听器时让事件在捕获阶段触发
.self 其他元素的事件触发时事件链经过它,无论是捕获还是冒泡阶段都不会触发它的事件,只有它自己是精准对象才会触发事件, 虽然它自己不会被别人影响,但是它自己的事件触发的时候还是会生成事件链经过其他元素,并不阻止继续冒泡到其他元素
.once 事件只触发一次,触发完之后,事件就解绑
多修饰符一起使用:连点

<div id="app">
      <!-- 方法+事件绑定+阻止冒泡 -->
      <div v-on:click.capture="fn1" class="box1">
        {{rwx1}}
        <!-- .self+.stop -->
        <div v-on:click.stop.self="fn2" class="box2">
          {{rwx2}}
          <!-- .stop -->
          <div v-on:click.stop="fn3" class="box3">{{rwx3}}</div>
        </div>
      </div>
      <!-- 阻止默认事件 -->
      <a v-on:click.prevent.once="fn" href="http:www.baidu.com">百度</a>
      <div v-on:click="fn4" class="box4"></div>
    </div>
    <script>
      new Vue({
        el: "#app",
        data: {
          rwx1: "rwx1",
          rwx2: "rwx2",
          rwx3: "rwx3",
        },
        methods: {
          fn1() {
            console.log(11111);
          },
          fn2() {
            console.log(22222);
          },
          fn3() {
            console.log(33333);
          },
          fn4() {
            this.fn1();
            this.fn2();
            this.fn3();
          },
        },
      });
    </script>

样式绑定

1 、对class 属性进行绑定

<!--对象语法,v-bind:class 指令也可以与普通的 class 属性共存-->
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
<div v-bind:class="classObject"></div>

对应js 中的data:
data: {
  isActive: true,
  hasError: false,
  classObject: {
    active: true,
    'text-danger': false
  }
}

<!--数组语法,这样写将始终添加 errorClass，但是只有在 isActive 是真值时才添加 activeClass-->
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
<div v-bind:class="[{ active: isActive }, errorClass]"></div>

2、对style 进行绑定

<!--对象语法-->
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<div v-bind:style="styleObject"></div>

对应js 中的data:
data: {
  activeColor: 'red',
  fontSize: 30,
  red1:"red",
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

<!--数组语法,可以将多个样式对象应用到同一个元素上-->
<div v-bind:style="[baseStyles, overridingStyles,{color:red1}]"></div>

条件渲染

v-if /v-else 或者 v-show

        <div id="app">
			<div v-if="flag">666</div>
			<div v-show="flag">777</div>
		</div>
		<script type="text/javascript">
			new Vue({
				el: "#app",
				data: {
					flag:false
				}
			})
//1.使用的变量为true就显示,false就隐藏			
//2.在业务中常常可以通过操作if或者show使用的变量,来达到操作元素显示和隐藏的效果
//3.v-if的做法是删除节点,v-show做法是操作css的display:none

visibility: hidden; 不脱离文档流的
display:none        脱离文档流
v-if                删除节点
v-show              display:none	

//4.这个两个谁好?(面试)
//根据它们底层的设计不一样有各自的使用场景
// v-if具有较高的 切换消耗,常常用在用户不常切换的模块
// v-show具有较高的性能消耗,常常用在频繁切换的模块中

循环渲染

1.for和if放在了同一个标签中没有先后顺序的要求,但是先执行for

渲染过程为：对arr每一项先做map循环判断v-if给出的条件，再做一遍for 循环渲染

这样引起的问题是：arr 数组新增一项数据时，会对每一项再做一遍v-if 循环，然后for 循环渲染

2.解决方案把for弄到最外层(面试)

如果if和for套在一层,数据容器发生变化时,if会重新判断一遍
嵌套的写法数据容器变化时 if只判断新增的数据
这样当arr 数组某一项数据发生变化时，只对新增的数据进行v-if 判断，节约渲染效率

这样又会产生新的问题:外层for的div会也创建一个挂载到DOM中
解决方案:wx采用的是block元素 vue呢? template 其实就是dom操作中的fragment
template 其实就是dom操作中的fragment

<div v-for="(item,index) in arr2" :key="item.id">
				<div class="box" v-if="item.age>=18">
					<p>{{item.name}}</p>
					<p>{{item.age}}</p>
					<p>{{item.info}}</p>
				</div>
</div>

vue外层for的div会也创建一个挂载到DOM中解决方案—— template 其实就是dom操作中的fragment

<body>
		<div id="app">
			<div v-for="el in arr3">
				<h1>{{el.name}}</h1>
				<template v-if="el.age>10">
				  <div v-for="el in el.titles">{{el}}</div>
				</template>
				<!-- <div v-for="el in el.titles"  v-if="el.age>10">{{el}}</div> -->
				<!-- <div id="" class=""></div> -->
			</div>
		</div>
		<script>
			var vm=new Vue({
				el:"#app",
				data:{
					arr3: [{
						name: "css",
						age:37,
						titles: ["宽度", "高度", "原角度","颜色"]
					}, {
						name: "js",
						age:20,
						titles: ["变量"]
					},{
						name: "html",
						age:90,
						titles: ["标签"]
					}]
				}
			})
			
			//vue2.0 中v-if  v-for  写到一个元素 v-for的优先级更高
			//解决方案:1.写成嵌套关系 2."冰"元素:template
			//vue3.0 不能写到一起  不然报错
		</script>

十二

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件、样式绑定、条件渲染、循环渲染-vue2

这样引起的问题是：arr 数组新增一项数据时，会对每一项再做一遍v-if 循环，然后for 循环渲染。渲染过程为：对arr每一项先做map循环判断v-if给出的条件，再做一遍for 循环渲染。这样当arr 数组某一项数据发生变化时，只对新增的数据进行v-if 判断，节约渲染效率。方法的写法:由于是做了es6语法处理的所以学过的所有方式的写法都行。这样又会产生新的问题:外层for的div会也创建一个挂载到DOM中。嵌套的写法数据容器变化时 if只判断新增的数据。2.解决方案把for弄到最外层(面试)...
复制链接

扫一扫