一、vue常見的指令
- v-once：保留第一次渲染結果
- v-html ：把html代碼解析，只顯示內容
- v-pre ：原樣輸出
- v-cloak ：解決文本閃爍問題
- v-text ：顯示文本
二、v-bind指令兩種寫法 作用：動態綁定屬性
- <a v-bind:href="url">百度</a>
- <a :href="url">百度</a>
1、v-bind動態綁定class(對象語法)
<a :href="url" class="title" :class="{active:isActive,line:isLine}">百度</a>
<a :href="url" class="title" :class="getClasses()">百度</a>
2、v-bind動態綁定class:(數組語法)
<h2 :class="[classaArray ,classaArray2]">{{message}}</h2>
<h2 :class="getClassArray()">{{message}}</h2>
*********完整代碼************
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./js/vue.js"></script>
<style>
.active {
color: red;
}
.line {
background: #666;
}
</style>
</head>
<div id="app">
<a v-bind:href="url">百度</a>
<!-- 動態綁定class{對象語法} -->
<a :href="url" class="title" :class="{active:isActive,line:isLine}">百度</a>
<a :href="url" class="title" :class="getClasses()">百度</a>
<!-- 動態綁定class[數組語法] -->
<h2 :class="[classaArray ,classaArray2]">{{message}}</h2>
<h2 :class="getClassArray()">{{message}}</h2>
<h2></h2>
<button v-on:click="getClass">按鈕</button>
</div>
<body>
<script>
let vm = new Vue({
el: '#app',
data: () => ({
message: '王者不可阻擋',
url: 'https://www.baidu.com/',
isActive: true,
isLine: true,
classaArray: 'active',
classaArray2: 'line'
}),
methods: {
getClass: function () {
this.isActive = !this.isActive
},
getClasses: function () {
return { active: this.isActive, line: this.isLine }
},
getClassArray: function () {
return [this.classaArray, this.classaArray2]
}
}
})
</script>
</body>
</html>
3、v-bind動態綁定style(對象語法)
<!-- <h2 :style="{ker(屬性名):value(屬性值)}">{{message}}</h2> -->
<h2 :style="{color:color,fontSize:'fontSize'}">{{message}}</h2>
<h2 :style="getStyle()">{{message}}</h2>
4、v-bind動態綁定style(數組語法)
<h2 :style="[baseStyle,baseStyle2]">{{message}}</h2>
*******完整代碼*******
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./js/vue.js"></script>
</head>
<div id="app">
<!-- v-bind動態綁定style（對象寫法） -->
<!-- <h2 :style="{ker(屬性名):value(屬性值)}">{{message}}</h2> -->
<h2 :style="{color:color,fontSize:'fontSize'}">{{message}}</h2>
<h2 :style="getStyle()">{{message}}</h2>
<!-- v-bind動態綁定style（數組寫法） -->
<h2 :style="[baseStyle,baseStyle2]">{{message}}</h2>
</div>
<body>
<script>
let vm = new Vue({
el: '#app',
data: () => ({
message: '愛生活，愛自己',
color: 'green',
fontSize: '50px',
baseStyle: {
background: 'red'
},
baseStyle2: {
color: 'pink'
}
}),
methods: {
getStyle: function () {
return { color: this.color, fontSize: this.fontSize }
}
}
})
</script>
</body>
</html>
