9.VUE_插值表达式和v-bind

最新推荐文章于 2023-11-07 10:33:40 发布

橘九。

最新推荐文章于 2023-11-07 10:33:40 发布

阅读量594

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/qq_34400745/article/details/102926184

版权

VUE 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

本文介绍了Vue.js中用于插入文本的插值表达式及其使用方式，强调了需要使用花括号包裹。同时，讨论了v-bind指令用于动态绑定属性的方法，提到了简写模式的应用。

摘要由CSDN通过智能技术生成

1.如果需要直接插入文本值，则需要用{{}}括起来

<template>
   <div class="p1">
       <p>{{name}}{{msg}}</p>
   </div>
</template>

<script>
    export default {
        name: "hello01",
        data(){
            return{
                name:"静静",
                msg:"今天开始学习vue啦"
                
            }
        }
    }

</script>

<style scoped>

</style>

2.v-bind绑定属性,
注意简写模式

<template>
   <div class="p1">

       <p>{{name}}{{msg}}</p>
<!--       绑定属性title-->
       <span v-bind:title="que">你还好吗</span>
       <br/>
<!--       v-bind的简写模式-->
       <span :title="res">我很好</span>
   </div>
</template>

<script>
    export default {
        name: "hello01",
        data(){
            return{
                name:"静静",
                msg:"今天开始学习vue啦",
                que:"问题？",
                res: "我很好！"

            }
        }
    }

</script>

<style scoped>