文章目录
- P.13.1 ==v-once== 只渲染元素和组件一次
- P.13.2 ==v-html== 解析显示带有html标签的文本
- P.13.3 ==v-text== 更新元素的 textContent
- P.13.4 ==v-pre== 原样显示文本
- P.13.5 ==v-cloak== 保持在元素上直到关联实例结束编译
- P.14 ==v-bind== 动态绑定 基本使用
- P.15 ==v-bind== 动态绑定class(对象语法)
- P.16 ==v-bind== 动态绑定class(数组语法)
- P.17 ==作业== v-bind和v-for结合使用
- P.18 ==v-bind== 动态绑定style(对象语法)
- P.19 ==v-bind== 动态绑定style(数组语法)
- P.20 ==computed== 计算属性的基本使用
- P.21 ==computed== 计算属性的复杂使用
P.13.1 v-once 只渲染元素和组件一次
<body>
<div id="app">
<h2>{{message}}</h2>
<h2 v-once>{{message}}</h2>
</div>
<script src="js/vue.js"></script>
<script>
const vm = new Vue({
el: "#app",
data: {
message: "Hello Vue.js!"
}
})
</script>
</body>
第一次接收数据时
修改数据
P.13.2 v-html 解析显示带有html标签的文本
<div id="app">
<h2>{{message}}</h2>
<h2>{{url}}</h2>
<h2 v-html>{{url}}</h2>
<h2 v-html="url"></h2>
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
message: "Hello Vue.js!",
url:'<a href="https://www.baidu.com/">百度一下</a>'
}
})
</script>
P.13.3 v-text 更新元素的 textContent
<div id="app">
<h2>{{message}}</h2>
<h2 v-text="content"></h2>
<h2 v-text="content">{{message}}</h2>
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
message: "我是原来的内容",
content: "你完了,我要替换更新你"
}
})
</script>
P.13.4 v-pre 原样显示文本
<body>
<div id="app">
<h2>{{message}}</h2>
<h2 v-pre>{{message}}</h2>
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
message: "Hello Vue.js!"
}
})
</script>
P.13.5 v-cloak 保持在元素上直到关联实例结束编译
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<script src="js/vue.js"></script>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<h2 v-cloak>{{message}}</h2>
</div>
<script>
setTimeout(function(){
const vm = new Vue({
el: "#app",
data: {
message: "Hello Vue.js!"
}
})
}, 1000)
</script>
</body>
</html>
P.14 v-bind 动态绑定 基本使用
<div id="app">
<br>
<img src="url" />
<br>
<br>
<img src="{{url}}" />
<br>
<img v-bind:src="url" />
<br>
<a href="aHref">百度一下</a>
<br>
<a href="{{aHref}}">百度一下</a>
<br>
<a v-bind:href="aHref">百度一下</a>
<a :href="aHref">百度一下</a>
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
message: "Hello Vue.js!",
url: "https://img20.360buyimg.com/mobilecms/s140x140_jfs/t1/19261/7/9299/160202/5c7de36eE68c6b708/ca2762256ec6f931.jpg.webp",
aHref: "https://www.baidu.com/"
}
})
</script>
v-bind
缩写 可以直接用 :(冒号)
动态地绑定一个或多个特性,或一个组件 prop 到表达式。
从源码中可以看出只有红框指向的写法的才是有效的
P.15 v-bind 动态绑定class(对象语法)
P.16 v-bind 动态绑定class(数组语法)
P.17 作业 v-bind和v-for结合使用
P.18 v-bind 动态绑定style(对象语法)
<div id="app">
<!-- 100px如果没有引号,则会被认为是Vue变量 -->
<!-- <h2 :style="{fontSize: 100px}">{{message}}</h2> -->
<h2 :style="{fontSize: '100px'}">{{message}}</h2>
<h2 :style="{fontSize: finalSize+'px', backgroundColor:finalColor}">{{message}}</h2>
<h2 :style="getStyles()">{{message}}</h2>
</div>
<script>
const vm = new Vue({
el: '#app',
data:{
message: '你好啊',
finalSize: 100,
finalColor: 'red'
},
methods:{
getStyles: function(){
return {fontSize: this.finalSize+'px', backgroundColor: this.finalColor}
}
}
})
</script>
P.19 v-bind 动态绑定style(数组语法)
<div id="app">
<h2 :style="[baseStyle, baseStyle2]">{{message}}</h2>
</div>
<script>
const vm = new Vue({
el: '#app',
data:{
message: '你好啊',
baseStyle: {backgroundColor: 'red'},
baseStyle2: {fontSize: '100px'}
}
})
</script>