2025年v-text 丶v-html丶v-bind

科技前沿 • 2025-03-29 17:34 • 阅读 29

大家好，我是讯享网，很高兴认识大家。

一丶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%2F4%2F4-1-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=&t=b9adaafa11e95a3fac27022c', 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>

2025年v-text 丶v-html丶v-bind

相关推荐