Vue.js--笔记二(v-on,v-model)

最新推荐文章于 2024-10-29 10:06:15 发布

zhengfu920227

最新推荐文章于 2024-10-29 10:06:15 发布

阅读量146

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/mianwan6227/article/details/106357903

版权

v-on

<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id = "app">
            <ul>
                <li v-for = "pre_item in pre_items">
                    <span v-if = "pre_item.pre_items_seen" v-on:click = "f_1($event)">{{pre_item.pre_items_content}}</span>
                </li>
            </ul>
        </div>
    </body>
</html>
<script>
    var app = new Vue({
            el: '#app',
            data: {
                pre_items : [

                    {pre_items_content : 'content_1',pre_items_seen : true},
                    {pre_items_content : 'content_2',pre_items_seen : false},
                    {pre_items_content : 'content_3',pre_items_seen : true}

                ]
            },
            methods:{ //methods:{}别忘记了

                f_1:function(in_arg){

                    window.alert('in_arg > ' + in_arg.currentTarget.innerHTML);

                }

            }
            
        });
    
       
</script>

需要注意事项，自定义函数一定要定义在，methods:{}对象中，如需在自定义函数中传递参数，参考上方$event。

v-model

<!DOCTYPE html>
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id = "app">
           <p>{{pre_content}}</p>
           <input type = "text" v-bind:value = "pre_content"/><br/>
           <input type = "text" v-model = "pre_content"/><br/>
           <input type = "text" v-model = "pre_content"/>
        </div>
    </body>
</html>
<script>
    var app = new Vue({
            el: '#app',
            data: {
                pre_content: 'init_value'
            }
            
        });
    
       
</script>