vue模板语法_vue 页面使用大于,大于等于,小于字符-CSDN博客

本文链接：https://blog.csdn.net/weixin_41152515/article/details/109464091

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

插值

数据绑定最常见的形式就是使用 {{…}}（双大括号）的文本插值：

  <body>
        <div id="box">
            {{message}}
            </div>
        <script>
            //vue实例化
            //el 绑定html对象，选择器
            //data:绑定html对象数据，双向绑定。可以用v-model
            var vm = new Vue({
                el:"#box",
                data:{
                    message:"hello,vue"
                }
            });

        </script>
  </body>

HTML

使用v-html绑定html代码：

 <body>
        <div id="box" v-html="message">
            
        </div>
        <script>
            new Vue({
                el:"#box",
                data:{
                    message:"<p>我的家</p>"
                }
            })
        </script>
    </body>

属性

html属性中的值使用 v-bind指令。比如v-bind:class,v-bind:style等

<head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/vue.js"></script>
        <style>
            .myclass{
                background: green;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <input type="checkbox" v-model="activeClass" id="mcheckbox" /><label for="mcheckbox">改变颜色</label>
            <input type="checkbox" v-model="activeStyle" id="stylecheckbox" /><label for="stylecheckbox">改变字体大小</label>
            <div v-bind:class="activeClass?'myclass':''" v-bind:style="activeStyle?'font-size:20px':''">请看颜色的变化</div>
        </div>
        <script>
            new Vue({
                el:"#box",
                data:{
                    activeClass:false,
                    activeStyle:false
                }
            })
        </script>
    </body>

上面的代码，我们通过v-bind:class和v-bind:style为元素绑定了style和class。并在v-bind中使用了表达式。当activeClass和activeStyle为true的时候，div的class和style都将发生改变。

参数

参数在指数后，用冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：

<div id="box">
            <input type="checkbox" v-model="activeClass" id="mcheckbox" /><label for="mcheckbox">改变颜色</label>
            <input type="checkbox" v-model="activeStyle" id="stylecheckbox" /><label for="stylecheckbox">改变字体大小</label>
            <div v-bind:class="activeClass?'myclass':''" v-bind:style="activeStyle?'font-size:20px':''">请看颜色的变化</div>
            <pre><a v-bind:href="url">百度</a></pre>
        </div>
        <script>
            new Vue({
                el:"#box",
                data:{
                    activeClass:false,
                    activeStyle:false,
                    url:'http://www.baidu.com'
                }
            })
        </script>

上面的代码就是通过v-bind:href，绑定了href属性。

事件绑定

通过使用v-on:参数，可以绑定事件。

<body>
        <div id="box">
            {{message}}
            <!--
                作者：offline
                时间：2018-08-28
                描述：v-on:click，点击事件
            -->
            <button v-on:click="reverseMessage">反转字符串</button>
            <!--
                作者：offline
                时间：2018-08-28
                描述：v-on:mouseover,鼠标进入事件，v-on:mouseout，鼠标移出事件
            -->
            <button v-on:mouseover="overColor" v-on:mouseout="outColor" v-bind:style="color">鼠标经过</button>
        </div>
        <script>
            new Vue({
                el:"#box",
                data:{
                    message:"hello,vue",
                    color:'color:blue;'
                },
                methods:{
                    reverseMessage:function(){
                        this.message=this.message.split('').reverse().join('');
                    },
                    overColor:function(){
                        this.color="color:green";
                    },
                    outColor:function(){
                        this.color="color:blue";
                    }
                }
            })
        </script>
    </body>

上面的代码，通过v-on:click,绑定了click事件。vue中的methods可以定义方法。v-on:mouseover和v-on:mouseout监听了鼠标移入和移出事件。鼠标移入的时候，style的color为green，鼠标移出的时，style的color颜色为blue。

过滤器

通过vue的filters属性，能够格式化data属性。下面的代码展示了时间格式化。通过在filters中定义一方法，该方法对属性进行格式化操作，并返回。使用格式化的时候，{{message|format|format2}}。

<body>
 9         <div id="box">
10             <!--
11                 作者：offline
12                 时间：2018-08-28
13                 描述：日期格式化
14             -->
15             {{time|formatTime}}
16         </div>
17         <script>
18             new Vue({
19                 el:"#box",
20                 data:{
21                     time:"2018-10-11 08:20:11"
22                 },
23                 filters:{
24                     formatTime:function(value){
25                         var time = new Date(value);
26                         var rtime=time.getFullYear()+"年"+(time.getMonth()+1)+"月"+time.getDate()+"日"+" "+time.getHours()+":"+time.getMinutes()+":"+time.getSeconds();
27                         return rtime;
28                     }
29                 }
30             })
31         </script>
32     </body>

实例化时间对象，并指定时间。然后将时间格式为年月日格式。

缩写

Vue.js 为两个最为常用的指令提供了特别的缩写：v-bind:class，可以缩写为 :class, v-on:click可以缩写为@click。

<body>
        <div id="box">
            <!--
                作者：offline
                时间：2018-08-28
                描述：日期格式化
            -->
            {{time|formatTime}}
            <div :class="myclass">看我字体的颜色</div>
            <div @click="clickFunc" :style="style">单击我</div>
        </div>
        <script>
            new Vue({
                el:"#box",
                data:{
                    time:"2018-10-11 08:20:11",
                    myclass:'class1',
                    style:'cursor:pointer;border:1px solid gray;width:50px'
                },
                methods:{
                    clickFunc:function(){
                        console.log("单击了我");
                    }
                },
                filters:{
                    formatTime:function(value){
                        var time = new Date(value);
                        var rtime=time.getFullYear()+"年"+(time.getMonth()+1)+"月"+time.getDate()+"日"+" "+time.getHours()+":"+time.getMinutes()+":"+time.getSeconds();
                        return rtime;
                    }
                }
            })
        </script>
    </body>