Vue学习三：v-on:click命令及v-html命令学习

本文为博主原创，未经允许不得转载：

第一部分： v-on:click 命令讲解及使用方法

<!DOCTYPE html>

<html lang="zh">

<head>

    <script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>

</head>

    <body>

        <div id="app" >

            <!--

                表达式形式:vue指令语法 v-指令名字+:+指令的参数=指令的表达式

            -->

            <button v-on:click="showsomething">click me!!</button>

            <!--

                v-on:click具有很多事件修饰符属性。比如：

                v-on:click.stop

                v-on:click.prevent

            -->

        </div>

        <script>

            var vm = new Vue({

                el:"#app",

                methods : {

                    showsomething:function(){

                        alert("show something");

                    }

                }

            })

        </script>

     </body>

</html>

其执行的效果如下图所示，在浏览器测试段加载，触发点击事件会执行自定义的事件：

第二部分：v-html主要作用为渲染页面元素：

<!DOCTYPE html>

<html lang="zh">

<head>

    <script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>

</head>

    <body>

        <div id="app" >

            {{ html }}

            <!--将其渲染为页面-->

            <div v-html="html"></div>

            {{ message }}

            <button v-on:click="message='123'">click me!</button>

            <!--只渲染一次-->

            <div v-once>

                {{message}}

            </div>

        </div>

        <script>

            var vm = new Vue({

                el:"#app",

                data:{

                    html:"<h1>hello</h1>",

                    message:"liuluwei"   //data中的数值为初始化值，加载时第一次渲染会采用data中的设值

                }

            })

        </script>

     </body>

</html>

在浏览器端加载，执行效果如图所示：

当触发点击事件之后，click me前面的字符串就会变为点击事件中定义的内容123.

巴特西

Vue学习三：v-on:click命令及v-html命令学习

最新文章

热门文章