<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>
    //1.绑定dom内容
    <a>{{name}}</a>
　　//2.绑定dom标签属性
　　<a :href="location">百度</a>
　　//绑定函数
   <button @click="add">添加</button>

    <script>

        new Vue({

　　　　　　data(){
                return {

                    name:'tom',

                    age:18,
　　　　　　　　　　　　location：'www.baidu.com'

                }

            }
　　　　　　, methods:{ add(){ 
　　　　　　　　　　　　alert("添加数据");
　　　　　　　              　} 
　　　　　　　　　　　　} 
　　　　}); 

</script> 

</body> 

</html>

4.0 vue绑定dom属性和函数的方法的更多相关文章

  1. Swift类与结构、存储属性、计算属性、函数与方法、附属脚本等

    写了12个Person来复习,不过完成同样的代码需要敲键盘的次数相比OC确实少了很多,这很多应该归功于Swift中不写分号,以及少了OC中的中括号. 一.类与结构体 两者在Swift中差不了多少了 类 ...

  2. Vue.js 计算属性(computed)

    Vue.js 计算属性(computed) 如果在模板中使用一些复杂的表达式,会让模板显得过于繁重,且后期难以维护.对此,vue.js 提供了计算属性(computed),你可以把这些复杂的表达式写到 ...

  3. vue 绑定属性 绑定Class 绑定style

    <template> <div id="app"> <h2>{{msg}}</h2> <br> <div v-bi ...

  4. Vue绑定属性 绑定Class 绑定style

    <template> <div id="app"> <h2>{{msg}}</h2> <br> <div v-bi ...

  5. 黑马vue---17、vue中通过属性绑定绑定style行内样式

    黑马vue---17.vue中通过属性绑定绑定style行内样式 一.总结 一句话总结: 如果属性名中带有短线必须加引号,比如: h1StyleObj: { color: 'red', 'font-s ...

  6. 黑马vue---16、vue中通过属性绑定为元素设置class类样式

    黑马vue---16.vue中通过属性绑定为元素设置class类样式 一.总结 一句话总结: 这里就是为元素绑定class样式,和后面的style样式区别一下 vue中class样式绑定方式的相对于原 ...

  7. 怎样在 Vue 里面绑定样式属性 ?

    在 Vue 里绑定样式属性可以使用 v-bind:class="" 和 v-bind:style="" , 二者都可以接受 变量 / 数组 / 对象. 不同点是 ...

  8. Vue.js04：vue样式-通过属性绑定方式为元素设置class类样式

    <!-- 传统写法 --> <h1 class="red thin">这是一个h1标签</h1> <!-- 第一种使用方式,直接传递一个数 ...

  9. Vue学习之路8-v-on指令学习简单事件绑定之属性

    前言 上一篇文章以v-on指令绑定click事件为例介绍了v-on指令的使用方法,本文介绍一下v-on绑定事件的一些属性的使用方法. v-on绑定指令属性 .stop属性 阻止单击事件继续向上传播(简 ...

随机推荐

  1. C语言之main方法解析(知识点1)

    1.注释       /*自带注释*/2.引包       #include <stdio.h>3.主方法    void main{}4.执行体     printf("打印& ...

  2. stm32 中库函数、结构体、地址的强制类型转换、相应特殊功能寄存器之间的关系

    以一个挂接在APB2上的外设函数使能为例 A : RCC_APB2PeriphClockCmd():时钟使能函数 1 RCC_APB2PeriphClockCmd(RCC_APB2Periph_AFI ...

  3. 3_Phase Portrait_相图_相轨迹

  4. 【Flutter】Flutter C/C++ 插件的开发 （支持 windows、macos、ios、android ）

    一个各平台调用 C/C++ 源码的例子,如何共享代码,配置相关的编译 官方的例子:https://docs.flutter.dev/development/platform-integration/c ...

  5. Socket.io+Notification实现浏览器消息推送

    前言 socket.io: 包含对websocket的封装,可实现服务端和客户端之前的通信.详情见官网(虽然是英文文档,但还是通俗易懂).Notification: Html5新特性,用于浏览器的桌面 ...

  6. vue全家桶+axios+jsonp+es6 仿肤君试用小程序

    vue全家桶+axios+jsonp+es6 仿肤君试用小程序 把自己写的一个小程序项目用vue来实现的,代码里面有一些注释,主要使用了vue-cli,vue,vuex,vue-router,axoi ...

  7. 安卓xml布局中 android:paddingBottom="@dimen/activity_vertical_margin"是什么意思？

    @dimen/activity_vertical_margin 是什么意思? @dimen/activity_vertical_margin这个的意思就是在你的values文件夹下面的dimens文件 ...

  8. 微信支付之微信H5支付(坑,ajax不支持重定向跳转)

    这里讲的是  微信h5支付,    是微信以外的手机浏览器调用微信h5支付  h5支付: H5支付是指商户在微信客户端外的移动端网页展示商品或服务,用户在前述页面确认使用微信支付时,商户发起本服务呼起 ...

  9. web.xml的作用及基本配置

    web工程中的web.xml文件有什么作用呢?它是每个web.xml工程都必须的吗? 一个web中完全可以没有web.xml文件,也就是说,web.xml文件并不是web工程必须的.那什么时候需要,什 ...

  10. pycharm——import已存在的库居然失败！

    问题 明明在cmd中可以import的库,放到pycharm中却找不到. 问题根源 找了一圈,最后得到这个结论. 因为pycharm默认就是这样的... 解决 打开设置,找到解释器 点击右边齿轮图标, ...