Vue最全指令大集合————VUE
程序员文章站
2022-04-14 23:00:49
# Vue指令大集合（无slot） #### 包含内容： 1. v-cloak2. v-html3. v-text4. v-bind5. v-show6. v-model7. v-for8. v-if v-else-if v-else9. v-pre 代码如下：（可以自己复制去看一下） html 展 ......
# 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指令的用法大集合，后面再深入说下他的路由功能。
#### 觉得有帮助的话给个赞呗！
上一篇： 完了！我妈妈只教我了怎么用叉子
下一篇： C++学习（八）之 图形库