44

Vue最全指令大集合————VUE

 4 years ago
source link: https://www.tuicool.com/articles/meIZzuB
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

# 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指令的用法大集合，后面再深入说下他的路由功能。

#### 觉得有帮助的话给个赞呗！


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK