vue判断显示隐藏-凯发k8官方网
1.vue凯发k8官方网官网
https://cn.vuejs.org
2.引入
通过script标签引入vue时最好放在head里，避免抖屏的情况。
tips：抖屏是指页面稍微大些，刷新页面会出现{{ }}的样式十分丑陋3.实例
元素通过id 和new vue对象的 el 进行绑定，该id对应一个挂载点，vue实例只会处理挂载点的内容；模板是指可以将挂载点的内容写入template标签中，同样会生效。
{{msg}} 这样的语法叫做差值表达式，表示将某元素插入到页面中1.v-text：直接在页面上显示
text效果：
2.v-html：以html在页面上显示
html效果：
3.点击触发事件 v-on:click
v-on:click=“点击触发的方法名”，再在methods中写上对应的方法名称，即可完成点击触发事件
v-on 可以简写成 @4. v-bind: 属性绑定
当需要进行数据对象绑定时，比如将title与data中的title绑定，需要用到v-bind指令。
效果如下：
v-bind: 可以简写成 :5.双向数据绑定 v-model
属性绑定只是单向属性绑定，并不能通过页面改变vue对象里的值，如果要实现双向的数据绑定，可以通过给v-model
效果如下：
6.计算属性 computed
当需要对多个值进行计算时，可以使用computed获取最终结果。例如：要获得全名，将姓和名拼接起来。
效果如下：
7.侦听器 watch
当需要对某个对象的改变进行侦听时，可以通过watch来完成。例如：要计算姓和名改变的次数。（代码见6：计算属性）
效果如下：
8.条件判断 v-if
当需要通过点击按钮对div内的对象进行判断时，如果对象为显示状态就隐藏起来，如果对象是隐藏状态就显示它，可以通过v-if来处理。
效果如下：
点击前：
点击后：
9.显示和隐藏 v-show
当需要对元素进行显示和隐藏时，可以通过v-show来实现，基本功能和v-if类似，但是不会销毁dom上的对象，只是将其隐藏起来，相当于加了一个display:none的属性，和v-if相比性能较高，如果是需要频繁切换隐藏显示状态的元素，使用v-show比较好。
10.遍历 v-for
当需要遍历一个列表里的值时，可以用v-for。index为每个元素的编号，可以作为key值，::key可以提升数据加载的效率。
- {{item}}
4.实现简易todolist
todolist：相当于一个任务列表，要实现的功能是通过页面添加删除任务列表。具体实现可以查看代码以及注释，主要原理是通过发布订阅模式实现父组件和子组件的属性传值来对数组进行操作。
实际效果：
增加list:
点击后删除：
总结
以上是凯发k8官方网为你收集整理的vue判断显示隐藏_web前端进阶之【vue】10分钟掌握vue 在学vue的童鞋过来拿资料的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇：
- 下一篇：