VUE常用指令v-xxx

概述

在vue中提供一些对于页面+数据的更为方便的操作，这些操作就叫做指令。譬如在HTML页面中这样使用`<div v-xxx=''></div>`

在vue中v-xxx就是vue的指令

指令就是以数据去驱动DOM行为的,简化DOM操作

常用指令

- 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><head><title></title></head><body><div id="app"></div><script type="text/javascript" src="vue.js"></script><script type="text/javascript">new Vue({el:'#app',template:`<div><!--测试v-text--><div v-text='mytext'></div></hr><!--测试v-html--><div v-html='myhtml'></div><!--测试v-if  v-else-if  v-else--><button v-if='checkvif'>测试v-if2</button><button v-if='num==1'>测试v-if</button>                <button v-else-if='num==2'>测试v-else-if</button><button v-else>测试v-else</button><!--测试v-show--><div v-show='checkshow'>我是V-SHOW</div><!--循环数组--><ul><li v-for='(item,index) in arrayfor'>{{ item }}-{{index}}</li></ul><!--循环数组--><ul><li v-for='item in arrayfor2'>{{ item }}</li></ul><!--循环对象--><ul><li v-for='(oj,key) in ojfor'>{{key}}:{{oj}}</li></ul></div>`,data:function(){return {mytext:'<h1>我这里是v-text</h1>',myhtml:'<h1>我这里是v-html</h1>',checkvif:true,num:6,checkshow:true,arrayfor:['篮球','足球','乒乓球'],arrayfor2:['篮球','足球','乒乓球'],ojfor:{play:'篮球',people:'ming',age:'19'}}}})</script></body></html>

运行效果

VUE常用指令v-xxx相关推荐

Vue常用指令 [vue框架][web前端]
Vue常用指令 Vue常用指令: 指令: HTML标签上带有v-前缀的特殊属性, 不同的指令有不同的意义 v-bind 为HTML标签绑定属性值, 如设置href,css样式等 eg: <bod ...
Vue 常用指令汇总
文章目录 1,vue简介 2,选择器:根据id.class等查找 3,静态绑定数据 data 4,插值 {{}}单项绑定 5,数据动态绑定:computed 6,数据双向绑定 :v-model 7,类 ...
Vue.js 第1章 Vue常用指令学习
今日目标能够写出第一个vue应用程序能够接受为什么需要学vue 能够使用指令能够通过指定完成简单的业务(增加删除查询) 能够理解mvvm 为什么要学习vue 企业需要可以提高开发效率实现vu ...
【vue 基础】 vue常用指令实例总结
文章目录 1.v-bind 2. v-on 2.1 参数问题 2.2 修饰符问题 3. v-for 4. v-if 5.v-show 6. v-model(重点) 6.1 原理 6.2 v-model ...
Vue 常用指令自定义指令
v-bind, v-model v-bind 为单向绑定: 数据只能从data流向页面 v-model 双向绑定: 数据不仅从data流向页面,还可以重页面流向data, 一般应用在表单类元素上,(如 ...
Vue常用指令v-show
v-show也是条件渲染指令,不同的是有 v-show 的元素会始终渲染并保持在 DOM 中.和v-if指令不同点在于:v-show是根据表达式之真假值,切换元素的 display CSS 属性,当条 ...
vue教程3：vue常用指令
v-text 作用:渲染文本到标签上,跟JQuery的text()方法类似直接上例子: <script>var app = new Vue({el: "#app",d ...
vue input file onchange_vue常用指令汇总
在我们对比vue与react的时候,会发现一个很明显的特点,react的写法很自由,用js来搞定一切,而vue的模版语法提供了一套相对固定的模式来书写页面,vue的优势在于这些特性帮助我们简化了代码, ...
vue基础--模板语法、常用指令：v-if、v-show、v-for、虚拟DOM、v-once、v-cloak、v-text、v-html、v-bind、v-on、自定义指令
一.模板语法 Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML,所以能被遵循规范的浏览器和 ...

VUE常用指令v-xxx

概述

常用指令

代码

运行效果

VUE常用指令v-xxx相关推荐

最新文章

热门文章