一、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>