码迷,mamicode.com
首页 > 其他好文 > 详细

Vue实例

时间:2018-07-24 19:14:28      阅读:201      评论:0      收藏:0      [点我收藏+]

标签:python   djang   ref   ever   一个   image   分享图片   bubuko   img   

 

第一个vue实例:

使用VUE和jquery和js一样,都需要先导入VUE你可以去cnd上导入也可以下载到本地

<body>
    <div id="app">
        <p>name:{{ name }}</p>
        <p>age:{{ age }}</p>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
    <script>
        var app = new Vue({  //设置一个Vue的对象然后来进行操作
            el:‘#app‘,   //  对标签id为app的进行操作
            data:{
                name:‘老王‘,
                age:17
            }
        })
    </script>
</body>

还可以这样写:
把你要渲染的信息进行设置为一个字典
<script>
var d = {
name:‘老赵‘,
age:18
}
var app = new Vue({
el:‘#app‘,
data:d,
})
</script>

 

 

其实vue就相当于python的django的渲染进行设置渲染

 

 

 

v-html:

添加标签和内容:

<body>
<!---->

    <div id="app">
        <p v-html="message"></p>   <!--这个是吧你的标签页渲染到这里是添加标签和内容-->
        <p>
            {{kong.split(‘‘).reverse().join(‘‘)}}  <!--这个就好比你的python的字符串的 方法 先去空 然后翻转 然后再拼接-->
        </p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:‘#app‘,
            data:{
                message:‘<a href="https://www.baidu.com">点我</a>‘,
                kong:‘坚强 坚强‘
            }
        })
    </script>

 

message.split(‘‘).reverse().join(‘‘):

对你的字体设置为翻转的   这个就好比python的字符串的操作先去空 然后 翻转然后拼接

<body>
    <div id="app">
         <p >{{ message.split(‘‘).reverse().join(‘‘) }}</p>    <!--对你的 内容进行翻转-->
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app =new Vue({
            el:‘#app‘,
            data:{
                message:‘好看不 马上我到了页面上就是翻转了‘
            }
        })
    </script>

 

效果显示:

技术分享图片

 

 结果就是翻转了

 

 

v-if 和v-show: 

都是判断你的 内容是不是正确之后显示的 if是显示  show是隐藏  

 

if的表达式当你的判断不成立就把信息给去除 而show是不正确的时候就隐藏

<body>
    <div id="app">
        <p v-if="ok">想要</p>   <!--当ok是正确的时候就显示出来-->
        <p v-show="ok">它想要</p>  <!--当ok是正确的时候就隐藏-->
    </div>
  <!---->
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:‘#app‘,
            data:{
                ok:true
            }
        })
    </script>
</body>

 

效果:show是隐藏 if是去除:

技术分享图片

 

Vue实例

标签:python   djang   ref   ever   一个   image   分享图片   bubuko   img   

原文地址:https://www.cnblogs.com/zhaoyunlong/p/9361589.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!