v-text 丶v-html丶v-bind

最新推荐文章于 2024-03-10 15:23:56 发布

大厂梦

最新推荐文章于 2024-03-10 15:23:56 发布

阅读量999

点赞数 1

文章标签： html 前端 vue.js

本文链接：https://blog.csdn.net/qq_35006507/article/details/123170030

版权

一丶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>