vue.js的v-if,v-on以及methods

vue.js的v-if,v-on以及methods

<html>
<head>
    <meta charset="utf-8">
    <title>wenzhen</title>
</head>
<body>

    <div id="app">
        <!-- v-if:v-if 条件渲染指令,根据其后表达式的bool值进行判断是否渲染该元素; -->
        <div id="title" v-if="name==='azer'">
            {{name}}
        </div>
        <!-- v-model:实现与数据的双向绑定 -->
        请输入:<input type="text" name="name" v-model='name'>
        <input type="checkbox" name="checkbox" v-model='isbind'>
        <br>
        <!-- v-on:绑定事件,冒号后边为click则为点击事件,等号后边为方法 -->
        <button v-on:click='submit' >提交</button>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script >
        new Vue({
            el:app,
            data:{ 
                name:"azerkang",
                isbind:true
            },
            <!--methods:固定写法,里边为对应元素的方法-->
            methods:{
                submit:function(){
                    window.alert("是否输入"+this.isbind);
                }
            }
        })
    </script>
</body>
</html>

解释:

 v-if="name==='azer'"

    v-if:vue的if判断,条件渲染指令;等号后边为条件,一般为布尔类型;如果等号后边的表达式的值为true,则渲染v-if对应的标签中的内容;如此处'name'的值为'azer'时,id为'title'的div标签中的内容才显示,否则不显示。

  v-on:click='submit' 

    v-on:vue的绑定事件,一般后边为click,即点击,当然跟js一样也可以为其他的事件。

  methods:{
      submit:function(){
          window.alert("是否输入"+this.isbind);
       } 
  }

    methods:方法区,事件可以调取其中的方法,此处点击submit按钮后,会调取methods中的submit方法。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容