#条件渲染
v-if 指令用于条件性的渲染一块内容.这块内容只会在指令的表达式返回truthy值的时候被渲染.
也可以使用v-else 添加一个 ‘else’ 块
指令概括:
v-if
v-else-if
v-else-if
v-else
用法:
v-if 与v-show的区别:
v-if:真干活,真渲染,不满足条件,html 树上,就没有该 节点.
v-show:假干活,真偷懒,只是简单地 控制元素的 display 属性,在html树上是 可以看到的.
如果,html 上的某个模块很重要,不满足条件,不显示的话,请用 v-if,这样就能保证不会通过 调试方式 拿到 越权信息.
如果信息不重要,且切换频繁,可以用 v-show,这方便显示,减少渲染开销.
v-if 与v-for的 使用:
v-if 与v-for 不要同时使用在 同一个元素 节点上.
如果控制某个列表显示与否,可以将 v-if 用在 v-for 节点的上一个节点,或者更上层节点上.
#列表渲染
用v-for 来渲染列表,这是最常用的 操作,没有之一.
语法形式:
v-for =’item in items ‘ :key=’item.message’
在 v-for 块中，我们可以访问所有父作用域的 property。 v-for 还支持一个可选的第二个参数，即当前项的索引。
这里面的parentMessage 是父作用域的 property.
:使用 v-for 来遍历一个对象的 property(属性)。
v-for 的状态维护,使用key 完成,
建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。
<span>在v-for里使用值范围,</span> v-for 也可以接受整数。在这种情况下，它会把模板重复对应次数。
在
可以使用使用v-for 来渲染一段包含多个元素的
#事件处理
可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
说明:示例中的 counter +=1 是一个JavaScript语句,counter 是通过vue实例化的 响应变量.
事件处理方法
一般事件会包含复杂的处理逻辑,向上面的例子直接将 JavaScript代码写在v-on的指令中是不可行的,
处理方法: v-on 指令可以接收一个 调用的方法名称
内联处理器中的方法
除了直接使用方法名调用以外,可以在内联JavaScript语句中调用方法:
注意区别:
上面调用say(‘hi’) 方法的根本方式是,使用了JavaScript 语句的 执行,实现了方法的调用.
并通过上述方式,实现了函数调用时 的传值的目的.
函数不能不需要传值的,传值是一个很重要的需求.
在内联语句中处理原始的DOM时间,可以使用特殊变量$event把它传入方法:
#表单输入绑定
可以使用v-model指令在表单
#文本
v-model 的作用是干嘛的呢?
表单数据的双向绑定有啥用呢?
这个后面在回答这个问题!
Original: https://www.cnblogs.com/bdxily/p/14392944.html
Author: 疯人院code
Title: Vue 条件渲染 列表渲染 事件处理 表单输入绑定
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/685159/
转载文章受原作者版权保护。转载请注明原作者出处！