（1）vue插值命令的简单用法

最新推荐文章于 2023-07-05 11:15:36 发布

慢慢来的小邵

最新推荐文章于 2023-07-05 11:15:36 发布

阅读量244

点赞数

本文链接：https://blog.csdn.net/m0_44946030/article/details/119277491

版权

<!DOCTYPE html>
<html>
    <body>
        <style>
            [v-cloak]{
                display:none;
            }
        </style>
    <div id="app" v-cloak>
    <!-- {{message}} 这种插值表达式动态绑定的是内容，可以是字符串也可以是表达式，会和data同步变 -->
      <h2 style="text-decoration:underline">{{message}}</h2>
      <h2 v-once>{{message}}</h2>
      <!-- v-once：message只更新一次后面message再改变但是此处展示内容不会变了 -->
      <h2 v-html="url"></h2>
      <!-- v-html：以html的形式显示内容 -->
      <h2 v-text="message">你好哇</h2>
      <!-- 会覆盖后面标签要显示的文字 -->
      <h2 v-pre>{{message}}</h2>
      <!-- v-pre：不会解析直接显示标签之前内容 -->
      <img v-bind:src="imageurl" >
      <!-- {{message}} 不可以绑定标签里的属性，如果要动态改变标签的属性，比如照片的轮播图的src属性，需要通过v-bind指令 -->
      <!-- v-bind:src可以缩写为:src -->
      <!-- v-bind可以动态绑定class和style ,可以是普通表达式、对象、数组-->
      <h2 :style="{fontSize:'50px'}">{{message}}</h2>
      <h2 :style="{fontSize:finnalsize}">{{message}}</h2>
      <h2 :style="[basestyle,overridingStyle]">{{message}}</h2>
      
    </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
        <script> 
        var app=new Vue(
            {el:"#app",
            data:{
                message:"勇敢牛牛不怕困难",
                url:'<a href="http://www.baidu.com">百度一下你就知道</a>',
                imageurl:'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=图片&hs=0&pn=9&spn=0&di=68750&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=103721101%2C4076571305&os=1671681722%2C547245709&simid=3334649763%2C301832115&adpicid=0&lpn=0&ln=30&fr=ala&fm=&sme=&cg=&bdtype=0&oriquery=图片&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%3A%2F%2Fgss0.baidu.com%2F-Po3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2F4034970a304e251fae75ad03a786c9177e3e534e.jpg%26refer%3Dhttp%3A%2F%2Fgss0.baidu.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Djpeg%3Fsec%3D1630300825%26t%3D2b8dc5ea6ab838ab453687c56d2a6981&fromurl=ippr_z2C%24qAzdH3FAzdH3Fr5oj6_z%26e3Bkwt17_z%26e3Bv54AzdH3Fq7jfpt5gAzdH3F9lcmlbcln_z%26e3Bip4s%3Fqks%3D6jswpj_q7jfpt5g_c&gsm=3&islist=&querylist=',
                finnalsize:'100px',
                basestyle:{backgroundColor:'red'},
                overridingStyle:{frontSize:'150px'}
            },
            methods:{
               
}
})
        </script>
    </body>
</html>

慢慢来的小邵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（1）vue插值命令的简单用法

<!DOCTYPE html><html> <body> <style> [v-cloak]{ display:none; } </style> <div id="app" v-cloak> <!-- {{message}} 这种插值表达式动态绑定的是内容，可以是字符串也可以是表达式，会和dat
复制链接

扫一扫