首页 > 其他 > 详细

一些指令

时间:2020-02-03 18:33:35      阅读:62      评论:0      收藏:0      [点我收藏+]

v-html:以html的形式解析

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <h2 v-html=‘url‘></h2>
        </div>
        <script src="vue.js" type="text/javascript"></script>
        <script>
            app=new Vue({
                el:"#app",
                data:{
                    url:<a href="http://www.baidu.com">baidu</a>
}, }) </script> </body> </html>

 

v-text:和mustache类似,但是它会覆掉标签之间的内容,使用起来并不是很灵活,没有mustache常用

技术分享图片

 

技术分享图片

v-pre和<pre></pre>标签一样,将标签之间的内容原封不动的展示出来

v-cloak防止闪动

 

 

 

 v-bind解析属性,动态的绑定变量。服务器请求过来的数据、图片等,一般要在data中进行一个中转,而不是直接在div中显示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="app">
        <!-- 给冒号后面的属性赋值 -->
        <img v-bind:src="imgurl" alt=‘‘>    
        <h1><a v-bind:href="aHref">baidu</a></h1>
    <!--语法糖写法 -->
    <img :src="imgurl" alt=‘‘>
    <h1><a :href="aHref">baidu</a></h1>
        </div>
        <script src="vue.js" type="text/javascript"></script>
        <script>
            app=new Vue({
                el:"#app",
                data:{
                    message:"hello",
                    imgurl:https://www.baidu.com/img/pc_1c6e30772d5e4103103bd460913332f9.png,
                    aHref:https:www.baidu.com
                    },
})
        </script>
    </body>
</html>

 

一些指令

原文:https://www.cnblogs.com/yizhiran/p/12256526.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!