- v-once使用：添加到html标签中，值不会再改变
<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>
<!-- 会覆盖所有值 -->
<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
动态的接受服务端传递过来的href和src属性
image.png
image.png -
v-bind动态绑定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>
-
计算属性的基本使用
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: '右边'
},
// 计算属性,是属性并非方法
computed: {
fullName: function() {
return this.firstName + ' ' + this.lastName;
}
},
methods: {
getFullname: function() {
return this.firstName + ' ' + this.lastName;
}
}
})
</script>
