vue.js的条件和循环

最新推荐文章于 2023-09-19 16:56:35 发布

cygodwg

最新推荐文章于 2023-09-19 16:56:35 发布

阅读量249

点赞数

分类专栏： vue.js

本文链接：https://blog.csdn.net/cygodwg/article/details/80775883

版权

vue.js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

vue工具也有自己的if，else，下面是使用例子

<div id="app-3">
  <p v-if="seen">当seen=true能看到我，seen=false看不到我</p>
</div>

var app = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

当seen为true时，显示内容，当seen为false对应内容隐藏。

从该例子可以看出vue不仅能够绑定页面的数据，还能绑定dom的属性中。

vue不仅有v-if还有v-else,v-else-if

示例：

<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>

如果没有定义布尔值的ok，二者均不显示。

<template>元素上使用v-if，渲染结果不包含template

key管理可复用的元素

<template v-if="type == 'user'">
<label>user</label>
<input type="text" name="user" placeholder="user" key="user">
</template>
<template v-else>
<label>email</label>
<input type="text" name="email" placeholder="email" key="email">

</template>

我们先不要key这个元素，我们在某个input中输入hello，然后从console改变type，发现input中的hello仍然还在，

这里vue为了尽可能高效的渲染元素，通常会复用元素，而不是从头渲染，之前输入的hello不会被清除掉的原因是vue只是替换了type,name,placeholder这些出现了的元素，而加上key之后将会重新渲染。

另外我们需要了解一下v-show指令

v-show与v-if某种程度上功能是一样的，区别在于v-show是始终渲染，并保留在dom中，v-show只是简单替换css的display属性

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

vue的循环操作

v-for：可以处理数组数据渲染列表，我们来看一个demo

<body>
	<div id="app-4">
	  <ol>
	    <li v-for="todo in todos">
	      {{ todo.text }}
	    </li>
	  </ol>
	</div>


<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
	var app4 = new Vue({
	  el: '#app-4',
	  data: {
	    todos: [
	      { text: '学习 JavaScript' },
	      { text: '学习 Vue' },
	      { text: '整个牛项目' }
	    ]
	  }
	})
</script>

</body>

我们可以在控制台输入

app4.todos.push({text:'新加入列表'})在列表的最后添加了一个新加入列表。

这里是数据绑定更加高级的体现了，我们可以在前台直接操作vue里面的绑定列表的数据操作列表

v-for拥有对父作用域属性的完全访问权，支持一个可选的第二参数位当前项的索引。

<div id="app">
<ol>
<li v-for="(todo, index) in todos">
{{parentMessage}} - {{index}} - {{ todo.text }}
</li>
</ol>
</div>

var vm = new Vue({
el: '#app',
data: {
parentMessage:'parents',
todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
]
}

});

v-for遍历对象属性

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }
  }
})

有两个可选参数key,index

<div v-for="(value, key) in object">
  {{ key }}: {{ value }}

</div>

<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }}: {{ value }}
</div>

`key`

vue的v-for更新渲染时，默认使用就地复用策略，如果数据项顺序被改变，vue将不会移动dom元素来匹配数据项的顺序

注意事项

由于javascript的限制，vue不能检测以下变动的数组：

当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength

为解决该类问题，可使用下列方式

1、Vue.set(vm.items, indexOfItem, newValue)

2、vm.items.splice(indexOfItem, 1, newValue)

对象更改检测注意事项

vue不能检测对象属性的添加或者删除：

对于已经创建的实例，vue不能动态添加根级别的响应式属性，但可使用

Vue.set(object,key,value);方法向嵌套对象添加响应式属性

例如

<div id="app">
<span>{{userProfile.name}}</span>
<span>{{userProfile.age}}</span>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
userProfile:{
name:'vue'
}
}
});

</script>

执行Vue.set(vm.userProfile,'age',20)将能够看到age

为对象添加多个属性的时候可以这样做：

vm.userProfile = Object.assign({}, vm.userProfile, {
  age: 27,
  sex: 'women'
})

显示过滤/排序结果

这里使用计算属性

data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

也可使用method方法

v-for与v-if

v-for的优先级比v-if高，v-if会重复执行与每个item

cygodwg

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.js的条件和循环

vue工具也有自己的if，else，下面是使用例子&lt;div id="app-3"&gt; &lt;p v-if="seen"&gt;当seen=true能看到我，seen=false看不到我&lt;/p&gt;&lt;/div&gt;var app = new Vue({ el: '#app-3', data: { seen: true }})当seen为true...
复制链接

扫一扫