正文

VUE--插值的操作

IP云
IP云V管理员/4 阅读
07/24
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

一、vue常见的指令

  1. v-once：保留第一次渲染结果
  2. v-html ：把html代码解析，只显示内容
  3. v-pre ：原样输出
  4. v-cloak ：解决文本闪烁问题
  5. 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: #;
}
</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>