VUE指令
2021-01-10 22:17
639 查看
指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时,将某些行为应用到 DOM 上。如下例子:
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>VUE指令</title> <script src="js/vue.min.js"></script> </head> <body> <!--布局--> <div id="instruct"> <p v-if="seen">VUE指令学习</p> <template v-if="ok"> <h1>好好学习VUE</h1> <h2>前端好框架,就业不用愁</h2> <h3>扯淡,必须得好好练习!</h3> </template> </div> <!--js--> <script> new Vue({ el:'#instruct', data:{ seen:true, ok:false } }); </script> </body></html>
ok设置为了false,效果如下:
然后设置ok为true,效果如下:
v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。起始就是前端的判断指令。
相关文章推荐
- Vue学习1-1.基础语法;2.指令:表单输入绑定,文本渲染;3.组件:定义组件,使用组件
- Vue 简介及内部指令
- vue之属性、条件、渲染、事件指令及修饰符
- vue指令
- 自定义类似于Jquery UI Selectable 的Vue指令v-selectable
- Vue 2.0基础语法:系统指令
- Vue.js指令综合大全
- vue 指令
- vue内部指令
- Vue基本语法和指令
- Vue中对v-html指令中图片的操作
- vue内置指令、自定义指令及自定义过滤器
- vue指令用法
- 使用use注册Vue全局组件和全局指令
- 掌握vue指令之(7)v-html指令
- vue基本指令笔记
- 说说 Vue.js 中的 v-once 指令
- Vue常用指令v-on:click
- vue2.0——v-model指令
- Vue-指令 v-text v-html v-model v-bind