Vue指令大集合（無slot）
包含內容：
- v-cloak
- v-html
- v-text
- v-bind
- v-show
- v-model
- v-for
- v-if v-else-if v-else
- v-pre
代碼如下：（可以自己複製去看一下）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue指令大集合（無 slot）</title>
</head>
<style>
[v-cloak]{
display: none;
}
.css{
color: red;
}
</style>
<body>
<div id="domo" v-cloak>
<p style="color: red;">v-html 標籤有效</p>
<p v-html="name"></p>
<p style="color: red;">v-text 標籤無效</p>
<p v-text="name"></p>
<hr />
<p style="color: red;">style</p>
<p :style="objCss">使用style從數據拿視圖，v-bind====:</p>
<p style="color: red;">v-bind可以簡寫成： ,動態地綁定一個或多個特性，或一個組件 prop 到表達式。</p>
<img v-bind:src='src'>v-bind可以省</img>
<p :style="{
color: 'yellow',
fontSize: '11px'
}">自己改,數據</p>
<p :class="{
'css':!bool
}">我不是紅色的</p>
<hr />
<p style="color: red">v-show</p>
<p v-show="bool">v-show可以控制出現或者隱藏</p>
<button @click='showClick'>v-on:click====@click點擊，隱藏</button>
<hr />
<p style="color: red">v-model 雙向綁定！</p>
<input v-model="name"></input>
<hr />
<p style="color: red">v-for</p>
<ul>
<li v-for="a in arr" v-html="'姓名：'+a.name+'；年齡:'+a.age"></li>
</ul>
<p v-for="a in arr" v-html="'姓名：'+a.name+'；年齡:'+a.age"></p>
<table v-for="a in arr">
<tr><td>{{a.name}}</td><td>{{a.age}}</td><td><img v-for="i in a.imgs" :src="i" /></td></tr>
</table>
<hr />
<p style="color: red">v-if</p>
<p v-if="type==='A'" v-text="name1"></p>
<div v-else-if="type==='B'" v-text="name2"></div>
<div v-else-if="type==='C'" v-text="name3"></div>
<div v-else="type==='D'" v-text="name4"></div>
<hr />
<p style="color: red">v-pre 這是一個跳過這個元素和它的子元素的編譯過程</p>
<p><span v-pre>{{ 被包括的vue語言全都無效化！！ }}</span></p>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script>
new Vue({
el: "#domo",
data: {
name: '<em>我愛你<span>而</span>你愛他</em>',
src:'img/發生的事_畫板 1.png',
objCss:{
color: 'blue',
fontSize: '28px'
},
bool:false,
arr: [{
name: "大哥",
age: 18,
imgs: ['img/image (24).gif']
}, {
name: "二哥",
age: 17,
imgs: ['img/image (25).gif']
}, {
name: "三弟",
age: 19,
imgs: ['img/image (26).gif']
}, {
name: "四弟",
age: 20,
imgs: ['img/image (27).gif']
}],
name1: "lemon",
name2: "enenenen",
name3: "DASDA",
name4: "eDASDASF",
type:'B',
},
methods:{
showClick(){
this.name="ddddd",
this.bool=!this.bool,
alert("取消隱藏")
this.type='D'
}
},
})
</script>
</body>
</html>
展示地址：[http://cth1688.qicp.vip/vue%20api.html]