Vue最全指令大集合————VUE
# Vue指令大集合（无slot）
#### 包含内容：
1. v-cloak
2. v-html
3. v-text
4. v-bind
5. v-show
6. v-model
7. v-for
8. v-if v-else-if v-else
9. v-pre
代码如下：（可以自己复制去看一下）
html
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="UTF-8">
6 <title>Vue指令大集合（无 slot）</title>
7 </head>
8 <style>
9 [v-cloak]{
10 display: none;
11 }
12 .css{
13 color: red;
14 }
15 </style>
16 <body>
17 <div id="domo" v-cloak>
18 <p style="color: red;">v-html 标签有效</p>
19 <p v-html="name"></p>
20 <p style="color: red;">v-text 标签无效</p>
21 <p v-text="name"></p>
22 <hr />
23 <p style="color: red;">style</p>
24 <p :style="objCss">使用style从数据拿视图，v-bind====:</p>
25 <p style="color: red;">v-bind可以简写成： ,动态地绑定一个或多个特性，或一个组件 prop 到表达式。</p>
26 <img v-bind:src='src'>v-bind可以省</img>
27 <p :style="{
28 color: 'yellow',
29 fontSize: '11px'
30 }">自己改,数据</p>
31 <p :class="{
32 'css':!bool
33 }">我不是红色的</p>
34 <hr />
35 <p style="color: red">v-show</p>
36 <p v-show="bool">v-show可以控制出现或者隐藏</p>
37 <button @click='showClick'>v-on:click====@click点击，隐藏</button>
38 <hr />
39 <p style="color: red">v-model 双向绑定！</p>
40 <input v-model="name"></input>
41 <hr />
42 <p style="color: red">v-for</p>
43 <ul>
44 <li v-for="a in arr" v-html="'姓名：'+a.name+'；年龄:'+a.age"></li>
45 </ul>
46 <p v-for="a in arr" v-html="'姓名：'+a.name+'；年龄:'+a.age"></p>
47 <table v-for="a in arr">
48 <tr><td>{{a.name}}</td><td>{{a.age}}</td><td><img v-for="i in a.imgs" :src="i" /></td></tr>
49 </table>
50 <hr />
51 <p style="color: red">v-if</p>
52 <p v-if="type==='A'" v-text="name1"></p>
53 <div v-else-if="type==='B'" v-text="name2"></div>
54 <div v-else-if="type==='C'" v-text="name3"></div>
55 <div v-else="type==='D'" v-text="name4"></div>
56 <hr />
57 <p style="color: red">v-pre 这是一个跳过这个元素和它的子元素的编译过程</p>
58 <p><span v-pre>{{ 被包括的vue语言全都无效化！！ }}</span></p>
59 </div>
60 <script type="text/javascript" src="js/vue.js"></script>
61 <script>
62 new Vue({
63 el: "#domo",
64 data: {
65 name: '<em>我爱你<span>而</span>你爱他</em>',
66 src:'img/发生的事_画板 1.png',
67 objCss:{
68 color: 'blue',
69 fontSize: '28px'
70 },
71 bool:false,
72 arr: [{
73 name: "大哥",
74 age: 18,
75 imgs: ['img/image (24).gif']
76 }, {
77 name: "二哥",
78 age: 17,
79 imgs: ['img/image (25).gif']
80 }, {
81 name: "三弟",
82 age: 19,
83 imgs: ['img/image (26).gif']
84 }, {
85 name: "四弟",
86 age: 20,
87 imgs: ['img/image (27).gif']
88 }],
89 name1: "lemon",
90 name2: "enenenen",
91 name3: "DASDA",
92 name4: "eDASDASF",
93 type:'B',
94 },
95 methods:{
96 showClick(){
97 this.name="ddddd",
98 this.bool=!this.bool,
99 alert("取消隐藏")
100 this.type='D'
101 }
102 },
103
104
105 })
106 </script>
107 </body>
108
109 </html>
展示地址：[http://cth1688.qicp.vip/vue%20api.html]
#### 这是一个VUE指令的用法大集合，后面再深入说下他的路由功能。
#### 觉得有帮助的话给个赞呗！
Vue最全指令大集合————VUE的更多相关文章
- vue怎么自定义指令？？
最近看看vue中自定义指令,感觉vue的指令和angular1的指令相差较大 <script> //指令钩子函数: /* bind 只调用一次,指令第一次绑定到元素的时调用 inserte ...
- vue实现全选效果
vue实现全选效果 接触vue快半年了,记得刚用vue做项目的时候遇到一个全选功能,当时到处百度也没有找到怎么实现,最后还是用了jquery进行dom操作实现的. 今天没事就顺手写了一个,感觉很简单, ...
- Vue.js 基础指令实例讲解（各种数据绑定、表单渲染大总结）——新手入门、高手进阶
Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架--只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动 ...
- vue组件大集合 component
vue组件分为全局组件.局部组件和父子组件,其中局部组件只能在el定义的范围内使用, 全局组件可以在随意地方使用,父子组件之间的传值问题等. Vue.extend 创建一个组件构造器 template ...
- 干货100+ 最超全的web开发工具和资源大集合
干货100+ 最超全的web开发工具和资源大集合 作为Web开发者,这是好的时代,也是坏的时代.Web开发技术也在不断变化.虽然很令人兴奋,但是这也意味着Web开发人员需要要积极主动的学习新技术和 ...
- vue.js自定义指令入门
Vue.js 允许你注册自定义指令,实质上是让你教 Vue 一些新技巧:怎样将数据的变化映射到 DOM 的行为.你可以使用Vue.directive(id, definition)的方法传入指令id和 ...
- Vue:渲染、指令、事件、组件、Props、Slots
如果要我用一句话描述使用 Vue 的经历,我可能会说“它如此合乎常理”或者“它提供给我需要的工具,而且没有妨碍我的工作”.每当学习 Vue 的时候,我都很高兴,因为很有意义,而且很优雅. 以上是我对 ...
- vue的基本指令
1.创建vue对象 <script src="vue.js"></script> var vm = new Vue({ el:"#ap ...
- Flask Vue.js全栈开发
Flask Vue.js全栈开发的 最新完整代码 及使用方式 本系列的最新代码及使用方式将持续更新到: http://www.madmalls.com/blog/post/latest-code/ 1 ...
随机推荐
- Go-json解码到结构体
废话不多说,直接干就得了,上代码 package main import ( "encoding/json" "fmt" ) type IT struct { ...
- python之web自动化验证码识别解决方案
验证码识别解决方案 对于web应用程序来讲,处于安全性考虑,在登录的时候,都会设置验证码,验证码的类型种类繁多,有图片中辨别数字字母的,有点击图片中指定的文字的,也有算术计算结果的,再复杂一点就是滑动 ...
- SpingBoot：整合Elasticsearch7.2.0
Spring boot 2.1.X整合Elasticsearch最新版的一处问题 新版本的Spring boot 2的spring-boot-starter-data-elasticsearch中支持 ...
- 全球DEM数据资源下载
想找有海底地形的全球DEM数据作为三维地球展示用,发现很多都是只有陆地DEM而不带海底的,而且还需要通过Web页面进行选择然后数据下载. 找到一个学校的Ftp可以直接下载数据集,特别是这篇文章几乎汇集 ...
- Spring Boot MyBatis 数据库集群访问实现
Spring Boot MyBatis 数据库集群访问实现 本示例主要介绍了Spring Boot程序方式实现数据库集群访问,读库轮询方式实现负载均衡.阅读本示例前,建议你有AOP编程基础.mybat ...
- Contour 学习笔记（一）：使用 Contour 接管 Kubernetes 的南北流量
原文链接:Contour 学习笔记(一):使用 Contour 接管 Kubernetes 的南北流量 在 Kubernetes 中运行大规模以 Web 为中心的工作负载,最关键的需求之一就是在 L7 ...
- （数据科学学习手札67）使用Git管理Github仓库
一.简介 Git是目前使用最广泛的分布式版本控制系统,通过Git可以方便高效地管理掌握工作过程中项目内容文件的更新变化情况,通过Git我们可以以命令行的形式完成对Github上开源仓库的clone,以 ...
- Delphi - cxGrid颜色显示相关设置
1:单元格的值满足某个条件时,该单元格所在整行颜色设置整行字体设置 选中cxGridDBTableView,单击F11调出属性配置面板,在Events中双击OnCustomDrawCell后双击编辑重 ...
- 关于AndroidStudio在真机安装的apk闪退(无法打开)的解决方案
问题描述: 重新安装AndroidStudio之后 1.发现在真机上安装apk时显示的是应用包名. 2.在真机上安装的apk无法打开,一直闪退. 如图: 解决方案: 关闭AndroidStudio的I ...
- 【百度之星】【思维】hdu 6724Totori's Switching Game
思维题,最后只要判断每个点的度数>=k即可. #pragma comment(linker, "/STACK:1024000000,1024000000") #pragma ...