Vue入门一、常用的指令

Vue常用的指令：
v-text不可解析HTML标签
v-html可解析HTML标签
v-if做元素的插入(append)和移除(remove)操作
v-else-if
v-else
v-show display:none和display:block的切换
v-for数组item，index对象value, key, index

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script type="text/javascript" src="vue.js"></script>
<div id="app"></div>
<script type="text/javascript">new Vue({el: '#app',template: `<div><div v-text='mytext'></div><div v-html='myhtml'></div><!-- if、elseif、else表达式 !--><button v-if='num==1'>测试vif</button><button v-else-if='num==2'>测试velseif</button><button v-else>测试velse</button><!-- v-show是否显示，true显示 false不显示--><div v-show='myshow'>我是show</div><div><ul><!-- 这里数组索引和值是相反的 !--><li v-for='item, index in arrayfor'>{{index}}, {{item}}</li></ul><ol><!-- 这里对象的key和value也是相反的 !--><li v-for='value,key in person'>{{key}},{{value}}</li></ol></div></div>`,data: function () {return {mytext: '我是个纯文本v-text',myhtml: '<h1>我是可以解析html标签</h1>',num: 3,myshow: true,arrayfor: ['咖啡', '茶', '牛奶'],person: {name: 'zhangsan', age: 12, hobby: 'playgames'}}}})
</script>
</body>
</html>

转载于:https://blog.51cto.com/12012821/2397620

Vue入门一、常用的指令相关推荐

vue入门（一）搭建vue项目，基础显示，指令
之前接触过vue,但是一直不是十分清晰,学的云里雾里,最近打算再次系统的整理一下,重新入门.还是根据vue官方文档一步一步的来,但是是属于简化的那种,会把我的学习过程都记录下来. 下一篇:vue入门( ...
linux入门与常用指令
前言在入门linux的时候感觉大部分很糟糕的,尤其是java开发者来说,对于非运维人员可能刚开始会对linux有很大的抵触性,可能还是更多喜欢桌面操作.或者在之前的学习中本来web的一堆东西就已经够 ...
Vue 基础之常用内置指令
Vue 基础之常用内置指令描述指令内容渲染指令 {{}} 与 v-text 覆盖面积 v-text {{}} 闪现问题 {{}} v-text v-html 属性绑定指令 v-bind 简写 : ...
vue 什么是渐进式响应式意思。Vue常用的指令。VUE:跨域设置。vue router 新窗口。$router.push。
Vue 是轻量的模型视图视图模型框架.就是数据的双向开发. 数据驱动+组件化开发. 渐进式框架. 官网:cn.vuejs.org 在读 Vue2.0 文档的时候,介绍"Vue.js( ...
Linux运维，到底如何入门？常用linux操作指令盘点！
自从2018年9月19日"误删生产数据库,顺丰高级工程师被开除"的事件出现以后,很多人又对运维投来了鄙夷的态度,但也从另一面反映出运维这一职位的重要性. 我们可以说普通程序员们的职 ...
VUE入门+5个小案例
本文是我心血来潮学习Vue框架所做的笔记,也供童鞋们学习参考.作为后端的开发人员,学习前端的Vue框架只是单纯地去了解下前端框架的内容,所以并没有深入地去学习,因此本文只适合Vue入门的童鞋哦.由于我 ...
VUE入门笔记，第二节
VUE入门笔记,第二节一.总结以上:实例-表格列表 [目标:实现表格数据的添加.删除和过滤筛选] [解决方案] <!DOCTYPE html> <html lang="e ...
VUE入门笔记，第一节
VUE入门笔记,第一节一.MVVM分层思想 M:用来保存每个页面中的单独的数据 V:每个页面中的HTML结构 VM:它是M和V层的调度者,它分割了M和V层,用于处理M和V层的数据双向绑定二.VUE ...
【半小时入门vue】最容易理解的vue入门方式
半小时入门vue 前言(!important) 学习vue的前提什么是vue? vue的引入方式实例化一个对象和创建一个对象实例化一个vue对象模板语法 1.插值表达式 2.v-text和v- ...

Vue入门一、常用的指令

Vue入门一、常用的指令相关推荐

最新文章

热门文章