一丶v-text 和 v-html 的区别(他们都是显示文本的)
1.v-text : 如果绑定值 含有html 标签,v-text :会直接绑定值,作为文本显示
2.v-html:如果绑定值含有html标签,会先编译,然后再绑定
<body>
<div id="app">
<div v-text="message"></div>
<div v-html="message"></div>
</div>
</body>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el:"#app",
data:{
message:"<a href='#'>hello</a>"
}
})
</script>
二丶v-bind 标签的使用
<style>
.red{
background-color: red;
}
</style>
<body>
<div id="app">
<div v-bind:title="title" :class="{red:isred}" :style="{fontSize:fontSize}"> 鼠标悬停查看数值
</div>
<div>
<a v-bind:href="href">百度</a><br>
<a :href="href">可简写为:href</a>
</div>
<div>
<img v-bind:src="src">
<img :src="src">
</div>
</div>
</body>
<!-- 绑定元素属性 : v-bind
语法:
v-bind: 写上需要绑定的元素属性="vue的属性"
v-bind:title="title"
可简写为 :title="title"
-->
<!-- 针对样式的特殊用法
注意:针对样式,vbind 只做增强
动态设置class样式
语法:{red:isred} =》 {需要动态控制的class样式:vue属性(需要boolean属性值)}
动态设置style样式
语法:{fontSize:fontSize} =》 {css样式的驼峰命名方式:vue属性} font-size = fontSize
-->
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data:{
red:"red",
title:"这是一个v-bind页面",
src:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F121420113514%2F201214113514-1-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648516158&t=b9adaaf33526248a11e95a3fac27022c',
href:'https://www.baidu.com'
}
})
</script>
v-bind :
语法:
v-bind: 写上需要绑定的元素属性="vue的属性"
v-bind:title="title"
可简写为 :title="title"
样式特殊用法:
动态设置class样式
语法:{red:isred} =》 {需要动态控制的class样式:vue属性(需要boolean属性值)}
动态设置style样式
语法:{fontSize:fontSize} =》 {css样式的驼峰命名方式:vue属性} font-size = fontSize
注意:针对样式,v-bind 只做增强
<style>
.red{
background-color: red;
}
</style>
<div id="app">
<div v-bind:title="title" :class="red" >
鼠标悬停查看数值
</div>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data:{
red:"red"
}
})
语法:{red:isred} =》 {需要动态控制的class样式:vue属性(需要boolean属性值)}
<style>
.red{
background-color: red;
}
</style>
<body>
<div id="app">
<div v-bind:title="title" :class="{red:isred}" >
鼠标悬停查看数值
</div>
</div>
</body>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data:{
isred:true
}
})
</script>
案例2
<style>
.red{
background-color: red;
}
</style>
<body>
<div id="app">
<div v-bind:title="title" :class="{red:isred}" :style="{fontSize:fontSize}">
鼠标悬停查看数值
</div>
<div>
<a v-bind:href="href">百度</a><br>
<a :href="href">可简写为:href</a>
</div>
<div>
<img v-bind:src="src">
<img :src="src">
</div>
</div>
</body>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data:{
fontSize:'50px'
}
})
</script>