Vue插值的操作和动态绑定属性v-bind
模板语法
1.插值的操作
1.Mustache
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<div id="app">
<h2>{{message}}h2>
<h2>{{fistName + ' ' + lastName}}h2>
<h2>{{fistName}} {{lastName}}h2>
<h2>{{counter * 2}}h2>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
fistName: 'bob',
lastName: 'ababababa',
counter: 100
}
})
script>
body>
html>
2.v-cloak
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
[v-cloak]{
display: none;
}
style>
head>
<body>
<div id="app">
<h2 v-cloak>{{message}}h2>
div>
<script src="../js/vue.js">script>
<script>
// 在vue解析之前，div中有一个属性v-cloak
// 在vue解析之后，div中没有一个属性v-cloak
setTimeout(function(){
const app = new Vue({
el: '#app',
data: {
message: '你好啊'
}
})
} , 1000)
script>
body>
html>
3.v-html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<div id="app">
<h2>{{URL}}h2>
<h2 v-html="URL">h2>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
URL: '百度一下'
}
})
script>
body>
html>
4.v-once
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<div id="app">
<h2>{{message}}h2>
<h2 v-once>{{message}}h2>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
}
})
script>
body>
html>
5.v-pre
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<div id="app">
<h2>{{message}}h2>
<h2 v-pre>{{message}}h2>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊'
}
})
script>
body>
html>
6.v-text
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<div id="app">
<h2>{{message}}h2>
<h2 v-text="message">h2>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊'
}
})
script>
body>
html>
2.动态绑定属性
1.v-bind
对象语法的用法
-
直接通过{}绑定一个类
<h2 :class="{active: isactive}">Hello Worldh2> -
也可以通过判断，传入多个值
<h2 :class="{active: isactive，line: isline}">Hello Worldh2> -
和普通的类同时存在，并不冲突
注：如果isactive和isline都为true，那么会有title/active/line三个类
<h2 class="title" :class="{active: isactive，line: isline}">Hello Worldh2> -
如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性
<h2 class="title" :class="{classes}">Hello Worldh2>
2.v-bind的基本使用方法
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<div id="app">
<img v-bind:src="imgURL" alt="">
<a v-bind:href="aHref">百度一下a>
<img :src="imgURL" alt="">
<a :href="aHref">百度一下a>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
imgURL:'https://gw.alicdn.com/tfs/TB1X.LvGWL7gK0jSZFBXXXZZpXa-800-800.png',
aHref:'http://www.baidu.com'
}
})
script>
body>
html>
3.v-bind动态绑定class（对象语法）
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.active{
color: red;
}
style>
head>
<body>
<div id="app">
<h2 :class="getclasses()">{{message}}h2>
<button v-on:click="btnclick">按钮button>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
isactive: true,
isline: true
},
methods:{
btnclick:function(){
this.isactive = !this.isactive
},
getclasses: function(){
return {active: this.isactive,line: this.isline}
}
}
})
script>
body>
html>
4.v-bind动态绑定class（数组语法）
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.active{
color: red;
}
style>
head>
<body>
<div id="app">
<h2 class="title" :class="[active , line]">{{message}}h2>
<h2 class="title" :class="getclasses()">{{message}}h2>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
active: 'aaaaa',
line: 'bbbbbbbbb'
},
methods:{
getclasses: function(){
return[this.active,this.line]
}
}
})
script>
body>
html>
5.v-bind动态绑定style（对象语法）
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<div id="app">
<h2 :style="getStyles()">{{message}}h2>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
finalSize: 100
},
methods:{
getStyles: function(){
return{fontSize: this.finalSize + 'px'}
}
}
})
script>
body>
html>
6.v-bind动态绑定style(数组语法)
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<div id="app">
<h2 :style="[baseStyle,baseStyle1]">{{message}}h2>
div>
<script src="../js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
baseStyle:{backgroundColor: 'red' },
baseStyle1: {fontSize: '100px'},
}
})
script>
body>
html>
3.v-for和v-bind综合使用小案例，实现点击列表中的任意一项，该项变红
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.active{
color: red;
}
style>
head>
<body>
<div id="app">
<ul>
<li v-for="(m,index) in movies" :class="{active: currentIndex == index}" @click="liClick(index)">{{index}}. {{m}}li>
ul>
div>
<script src="js/vue.js">script>
<script>
const app = new Vue({
el: '#app',
data: {
movies: ['海王', '火影忍者', '进击的巨人'],
currentIndex : '0'
},
methods:{
liClick(index) {
this.currentIndex = index
}
}
})
script>
body>
html>