zoukankan      html  css  js  c++  java
  • Vue---第十八章元素绑定v-bind,v-on

    1.格式

    完整格式:v-bind:元素属性='xxx'

    缩写格式::元素属性='xxx'

    在上一章节的基础上,我们增加了如下代码,imgUrl的地址是网上随便找的

     然后我们看看效果

     增加跳转链接

     

     

    2.事件绑定,格式

    完整写法:v-on:事件名称="事件处理函数名"

    缩写:@事件名称="事件处理函数名" 

    用于监听DOM事件

    代码如下

     <div>

      <input type="text" value="1" v-model="num">
            <button v-on:click="add">点击+1</button>

    </div>

    <script>
            var vue=new Vue({
                el:"#app",
                data:{
                    msg:'小桃子',
                    name:'xiaol',
                    score:100,
                    contentHtml:`<span style="color:red">此内容为红色字体
                        <script>alert('hello xiaotiaozi')</script>
                        </span>`,
                    imgUrl:'https://cn.vuejs.org/images/logo.png',
                    xiaotaozi:'https://i.cnblogs.com/posts/edit',
                    num:10
                },
                methods:{//指定事件处理函数
                    add:function(){//定义一个add函数
                        console.log('add被调用')
                        this.num ++
                    }
                }
            })
        </script>

     前面是不是输入框是由input标签决定,初始值num=10是由data中的数据实现然后再由v-model来决定,button是点击事件的标签,button中value的值为点击+1,然后在button中绑定v-no标签来实现函数加1

    沫笙
  • 相关阅读:
    [CF-Edu113]D. Inconvenient Pairs
    第3组团队Git现场编程实战
    团队项目-选题报告
    第一次个人编程作业
    第一次软工博客作业
    (二十二)python 3 sort()与sorted()
    (二十一)python 3 内置函数
    (二十)python 3 匿名函数
    (十九)python 3 内嵌函数和闭包
    (十八)python 3 回调函数
  • 原文地址:https://www.cnblogs.com/wendy-0901/p/14388893.html
Copyright © 2011-2022 走看看