Attribute
Mustache 语法不能作用在 HTML attribute 上,遇到这种情况应该使用 v-bind 指令:
<div v-bind:id="dynamicId"></div>
对于布尔 attribute (它们只要存在就意味着值为 true),v-bind 工作起来略有不同,在这个例子中:
<button v-bind:disabled="isButtonDisabled">Button</button>
如果 isButtonDisabled 的值是 null、undefined 或 false,则 disabled attribute 甚至不会被包含在渲染出来的 <button> 元素中。
JavaScript 表达式
迄今为止,在我们的模板中,我们一直都只绑定简单的 property 键值。但实际上,对于所有的数据绑定,Vue.js 都提供了完全的 JavaScript 表达式支持。
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是,每个绑定都只能包含单个表达式,所以下面的例子都不会生效。
<!-- 这是语句,不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效,请使用三元表达式 -->
{{ if (ok) { return message } }}
v-bind实例
<template>
<div>
<p>{{test57}}</p>
<p>{{test58}}</p>
<p v-once>{{test57}}</p>
<button @click="changeUname">changename</button>
<p>{{msg}}</p>
<p v-html="msg"> </p>
<p v-bind:id="id">v-bind绑定</p>
<img v-bind:src="url">
</div>
</template>
<script>
export default{
data(){
return{
test57: '57-6666',
test58: '58-jjjj',
msg:"<h2>标题56</h2>>",
id: "d1",
url: "https://www.xiaohongshu.com/favicon.ico"
}
},
methods:{
changeUname: function (){
this.test57='66666666666666'
},
},
};
</script>
<style>
#d1{
color: red;
}
</style>
<template>
<div>
<p>{{test57}}</p>
<p>{{test58}}</p>
<p v-once>{{test57}}</p>
<button @click="changeUname">changename</button>
<p>{{msg}}</p>
<p v-html="msg"> </p>
<p v-bind:id="id">v-bind绑定</p>
<img v-bind:src="url" alt="">
<button @click="changeColor">changeColor</button>
</div>
</template>
<script>
export default{
data(){
return{
test57: '57-6666',
test58: '58-jjjj',
msg:"<h2>标题56</h2>>",
id: "d1",
url: "https://www.xiaohongshu.com/favicon.ico"
}
},
methods:{
changeUname: function (){
this.test57='66666666666666'
},
changeColor: function (){
this.id="d2"
}
},
};
</script>
<style>
#d1{
color: red;
}
#d2{
color: blue;
}
</style>
- 看下图点击按钮变 bule
使用 JavaScript 表达式
迄今为止,在我们的模板中,我们一直都只绑定简单的 property 键值。但实际上,对于所有的数据绑定,Vue.js 都提供了完全的 JavaScript 表达式支持。
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是,每个绑定都只能包含单个表达式,所以下面的例子都不会生效。
<!-- 这是语句,不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效,请使用三元表达式 -->
{{ if (ok) { return message } }}
<template>
<div>
<p>{{test57}}</p>
<p>{{test58}}</p>
<p v-once>{{test57}}</p>
<button @click="changeUname">changename</button>
<p>{{msg}}</p>
<p v-html="msg"> </p>
<p v-bind:id="id">v-bind绑定</p>
<img v-bind:src="url" alt="">
<button @click="changeColor">changeColor</button>
<button @click="id='d2'">改变颜色</button> //两个按钮 一样的
<p>{{num+1}}</p>
<p>{{test57.split('').reverse().join('')}}</p> //倒叙
</div>
</template>
<script>
export default{
data(){
return{
test57: '57-6666',
test58: '58-jjjj',
num: 0,
msg:"<h2>标题56</h2>>",
id: "d1",
url: "https://www.xiaohongshu.com/favicon.ico"
}
},
methods:{
changeUname: function (){
this.test57='66666666666666'
},
changeColor: function (){
this.id="d2"
}
},
};
</script>
<style>
#d1{
color: red;
}
#d2{
color: blue;
}
</style>
语法糖
@ v-on
: v-band
<template>
<div>
<p>{{test57}}</p>
<p>{{test58}}</p>
<p v-once>{{test57}}</p>
<button @click="changeUname">changename</button>
<p>{{msg}}</p>
<p v-html="msg"> </p>
<p v-bind:id="id">v-bind绑定</p>
<img v-bind:src="url" alt="">
<button @click="changeColor">changeColor</button>
<button @click="id='d2'">改变颜色</button> //两个按钮 一样的
<p>{{num+1}}</p>
<p>{{test57.split('').reverse().join('')}}</p>
<p v-bind:id="id+1">js+v-band</p>
<!-- v-bind 语法糖 :-->
<p :id="id">语法糖</p>
<!-- v-on 用于监听DOM 语法糖 @ -->
<button @click="changeColor">语法糖</button>
</div>
</template>
<script>
export default{
data(){
return{
test57: '57-6666',
test58: '58-jjjj',
num: 0,
msg:"<h2>标题56</h2>>",
id: "d1",
url: "https://www.xiaohongshu.com/favicon.ico"
}
},
methods:{
changeUname: function (){
this.test57='66666666666666'
},
changeColor: function (){
this.id="d2"
}
},
};
</script>
<style>
#d1{
color: red;
}
#d2{
color: blue;
}
</style>
属性
<template>
<div>
<p>{{test57}}</p>
<p>{{test58}}</p>
<p v-once>{{test57}}</p>
<button @click="changeUname">changename</button>
<p>{{msg}}</p>
<p v-html="msg"> </p>
<p v-bind:id="id">v-bind绑定</p>
<img v-bind:src="url" alt="">
<button @click="changeColor">changeColor</button>
<button @click="id='d2'">改变颜色</button> //两个按钮 一样的
<p>{{num+1}}</p>
<p>{{test57.split('').reverse().join('')}}</p>
<p v-bind:id="id+1">js+v-band</p>
<!-- v-bind 语法糖 :-->
<p :id="id">语法糖</p>
<!-- v-on 用于监听DOM 语法糖 @ -->
<button @click="changeColor">语法糖</button>
<!--动态参数 -->
<p v-bind:[attributeName]="id">属性v-bind</p>
<button @click="attributeName='class'">改变属性</button>
</div>
</template>
<script>
export default{
data(){
return{
test57: '57-6666',
test58: '58-jjjj',
num: 0,
msg:"<h2>标题56</h2>>",
id: "d1",
url: "https://www.xiaohongshu.com/favicon.ico",
attributeName: 'id'
}
},
methods:{
changeUname: function (){
this.test57='66666666666666'
},
changeColor: function (){
this.id="d2"
}
},
};
</script>
<style>
#d1{
color: red;
}
#d2{
color: blue;
}
.d1{
font-size: 50px;
}
</style>
动态事件
<template>
<div>
<p>{{test57}}</p>
<p>{{test58}}</p>
<p v-once>{{test57}}</p>
<button @click="changeUname">changename</button>
<p>{{msg}}</p>
<p v-html="msg"> </p>
<p v-bind:id="id">v-bind绑定</p>
<img v-bind:src="url" alt="">
<button @click="changeColor">changeColor</button>
<button @click="id='d2'">改变颜色</button> //两个按钮 一样的
<p>{{num+1}}</p>
<p>{{test57.split('').reverse().join('')}}</p>
<p v-bind:id="id+1">js+v-band</p>
<!-- v-bind 语法糖 :-->
<p :id="id">语法糖</p>
<!-- v-on 用于监听DOM 语法糖 @ -->
<button @click="changeColor">语法糖</button>
<!--动态参数 -->
<p v-bind:[attributeName]="id">属性v-bind</p>
<button @click="attributeName='class'">改变属性</button>
<!--动态事件 -->
<button @[mouseEvent]="attributeName='class'">鼠标事件改变属性为class</button>
<button @click="mouseEvent='mouseover'">改变属性事件-鼠标悬停</button>
</div>
</template>
<script>
export default{
data(){
return{
test57: '57-6666',
test58: '58-jjjj',
num: 0,
msg:"<h2>标题56</h2>>",
id: "d1",
url: "https://www.xiaohongshu.com/favicon.ico",
mouseEvent: "click",
attributeName: 'id'
}
},
methods:{
changeUname: function (){
this.test57='66666666666666'
},
changeColor: function (){
this.id="d2"
}
},
};
</script>
<style>
#d1{
color: red;
}
#d2{
color: blue;
}
.d1{
font-size: 50px;
}
</style>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。