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

插值表达式和Vue标签属性的用法

时间:2020-02-18 18:09:45      阅读:175      评论:0      收藏:0      [点我收藏+]

标签:ack   document   ini   splay   func   nbsp   时间   style   function   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
    <style>
        [v-cloak]{
            display: none;
            }
    </style>
</head>

<body>
    <div id="app">
        <!-- 使用v-cloak来解决插值表达式{{msg}}的闪烁问题(防止在取到数据以前闪烁出来的msg) -->

        <!-- v-cloak和v-text之间作用相似,都能表达出msg,但是也有区别 -->
        <p v-cloak>{{msg}}</p><!-- v-cloak会将标签中的内容全都显示,即使在插值表达式前后加数据也都会显示出来 -->
        <h4 v-text="msg"></h4><!-- v-text只会显示msg,标签之间如果添加其他东西则会被msg覆盖掉;v-text没有闪烁问题 -->
        <!-- v-html是将msg2数据中的数据转换为html的页面 -->
        <div v-html="msg2"></div>
        <!-- v-bind是提供用于绑定属性的指令,也就是说,如果title中的值是定值则不需要v-bind,如果是一个变量,
        则需要绑定v-bind才能显示变量;也可以变量加上一个表达式 -->
        <input type="button" value="按钮" v-bind:title="mytitle +‘123‘">
        <input type="button" value="按钮" :title="mytitle+‘123‘"><!-- v-bind的简写形式就是: -->
        <!-- v-on来提供时间绑定机制(如点击按钮触发弹窗,鼠标覆盖到按钮触发弹窗) -->
        <input type="button" value="按钮" v-on:click="show">
        <input type="button" value="按钮" @mouseover="show"><!-- v-on的简写形式就是@ -->
    </div>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                msg:"123",
                msg2:"<h1>我是一个大大的标签,我大,我骄傲</h1>",
                mytitle:"这是一个自定义title"
            },
            methods:{//这个methods属性中定义了Vue中所有可用的方法
                show:function(){
                    alert("hello")
                }
            }
        })
    </script>
</body>
</html>

 

 

插值表达式和Vue标签属性的用法

标签:ack   document   ini   splay   func   nbsp   时间   style   function   

原文地址:https://www.cnblogs.com/KeepCalmAndNeverSayNever/p/12327201.html

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