- v-once使用：添加到html標(biāo)簽中，值不會(huì)再改變
<div id="app">
<h1>{{message}}</h1>
<h1 v-once>{{message}}</h1>
</div>
<script src="../../node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: "haha"
}
})
</script>
image.png
-
v-html
image.png
<div id="app">
<h1>{{url}}</h1>
<h1 v-html='url'>{{url}}</h1>
</div>
<script src="../../node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: "haha",
url: '<a href="www.baidu.com">百度一下</a>'
}
})
</script>
-
v-text
image.png
<div id="app">
<h1>{{message}}</h1>
<h1 v-text='message'>message</h1>
<!-- 會(huì)覆蓋所有值 -->
<h1 v-text='message'>message,haha1</h1>
</div>
<script src="../../node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: "haha",
}
})
</script>
-
v-pre
image.png
<div id="app">
<h1>{{message}}</h1>
<!-- 不要解析 -->
<h1 v-pre>{{message}}</h1>
</div>
<script src="../../node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: "你好啊",
}
})
</script>
- v-cloak
cloak:斗篷
- vue解析之前，v-cloak屬性存在，
-
vue解析之后，v-cloak屬性不存在
image.png
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app">
<h1 v-cloak>{{message}}</h1>
</div>
<script src="../../node_modules/vue/dist/vue.js"></script>
<script>
//1秒之后顯示
setTimeout(function() {
const app = new Vue({
el: '#app',
data: {
message: "你好啊",
}
})
}, 1000)
</script>
</body>
- v-bind
動(dòng)態(tài)的接受服務(wù)端傳遞過(guò)來(lái)的href和src屬性
image.png
image.png -
v-bind動(dòng)態(tài)綁定class
image.png
<div id="app">
<h2 v-bind:class="{active:isActive,line:isLine}">你好啊</h2>
<button v-on:click='btnClick'>按鈕</button>
</div>
<script src="../../node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
isActive: true,
isLine: true
},
methods: {
btnClick: function() {
this.isActive = !this.isActive;
}
}
})
</script>
-
計(jì)算屬性的基本使用
image.png
<div id="app">
<h2>{{firstName}} {{lastName}}</h2>
<h2>{{getFullname()}}</h2>
<h2>{{fullName}}</h2>
</div>
<script src="../../node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
firstName: '左邊',
lastName: '右邊'
},
// 計(jì)算屬性,是屬性并非方法
computed: {
fullName: function() {
return this.firstName + ' ' + this.lastName;
}
},
methods: {
getFullname: function() {
return this.firstName + ' ' + this.lastName;
}
}
})
</script>
