<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8">

	<meta http-equiv="X-UA-Compatible" content="IE=edge">

	<title>vue</title>

	<link rel="stylesheet" href="">

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	<!-- <script type="text/javascript" src="../js/vue.js"></script> -->

</head>

<body>

	<div id="vue">

	<!-- 会随着data库里的值动态改变而改变 -->

	<h2>{{hd}}</h2>

	<!-- v-model是给input动态绑定取data里的hd变量值,并且input里输入的值会动态改变data库里hd的变量值,hd库里的值改变后,又会重新赋值给模板页面里,并刷新模板页面里的值 -->

	<input type="text" v-model="hd" name="" value="" placeholder="">

	<!-- v-once只绑定一次.只取初始化时data里的hd值,之后动态改变data库里的值,不影响 v-once -->

	<h3 v-once>{{hd}}</h3>

	</div>

</body>

<script type="text/javascript">

 var app=new Vue({

 	el:'#vue', //绑定id='vue'为的元素

 	data:{ //相当于数据库

 		hd:'test data.',

 	}

 });

</script>

</html>

效果:

03.VUE学习之动态绑定值的更多相关文章

  1. C# bootstrap之表格动态绑定值

    这段时间研究了下bootstrap,打算从表格开始学习,实现动态绑定值,在网上找了挺多例子,但是很少有写全的,要不就太复杂,实现效果后总结一下,直接拷贝过去可以用. 第一步:先去官网上下载bootst ...

  2. vue中循环时动态绑定值

    在vue项目中,有很多需要动态循环绑定的场景,在未知绑定数量的情况下只能动态生成绑定值 1.首先在data中定义一个对象,我在项目中时循环绑定下拉框,所以定义了一个selectVal = {} 2.在 ...

  3. jquery select chosen 动态绑定值

    $("#ddlMstData").find("option[value=" + data.MstKey + "]").attr(" ...

  4. vue学习【二】vue结合axios动态引用echarts

    大家好,我是一叶,本篇是vue学习的第二篇,本篇将要讲述vue结合axios动态引用echarts. 在vue中,异步刷新使用的是axios,类似于大家常用的ajax,其实axios已经是vue的第二 ...

  5. vue学习03 v-html

    vue学习03v-html v-html指令的作用是:设置元素的内部html链接 内容有html 的结构会被解析为标签 v-text指令无论内容是什么,只会解析文本 解析文本使用v-text,需要解析 ...

  6. Vue学习看这篇就够

    Vue -渐进式JavaScript框架 介绍 vue 中文网 vue github Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架 库和框架的区别 我们所说的前端框架与库的 ...

  7. Vue学习系列(三)——基本指令

    前言 在上一篇中,我们已经对组件有了更加进一步的认识,从组件的创建构造器到组件的组成,进而到组件的使用,.从组件的基本使用.组件属性,以及自定义事件实现父子通讯和巧妙运用插槽slot分发内容,进一步的 ...

  8. Vue学习记录（一）

    一.引入js文件(直接采用CDN): http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js 二.简单实例: (1)HTML代码: &l ...

  9. vue学习之路 - 4.基本操作（下）

    vue学习之路 - 4.基本操作(下) 简述:本章节主要介绍 vue 的一些其他常用指令. Vue 指令 这里将 vue 的指令分为系统内部指令(vue 自带指令)和用户自定义指令两种. 系统内部指令 ...

随机推荐

  1. POJ 1061青蛙的约会。求解(x+mT)%L=(y+nT)%L的最小步数T。

    因为是同余,所以就是(x+mT)%L-(y+nT)%L=0.可以写成(x-y+(m-n)T)%L=0.就是这个数是L的倍数啦.那么我可以这样x-y+(m-n)T + Ls = 0.就可以了,s可正可负 ...

  2. Hive项目实战：用Hive分析“余额宝”躺着赚大钱背后的逻辑

    一.项目背景 前两年,支付宝推出的“余额宝”赚尽无数人的眼球,同时也吸引的大量的小额资金进入.“余额宝”把用户的散钱利息提高到了年化收益率4.0%左右,比起银行活期存储存款0.3%左右高出太多了,也正 ...

  3. opencv——IplImage结构

    一.作业要求: 采用MATLAB或opencv+C编程实现.每一题写明题目,给出试验程序代码,实验结果图片命名区分并作出效果比对,最后实验总结说明每一题蕴含的图像处理方法的效果以及应用场合等. 采用M ...

  4. IE6下float双边距问题

    当浮动元素的方向和设置margin的方向相同时,就会出现双边距问题,解决方法是: 删除浮动,改成display:inline-block _display:inline; _zoom:1;

  5. Nginx 安装(CentOS )非yum安装

    Nginx 安装(CentOS ) 一.安装编译工具及库文件 yum -y install make zlib zlib-devel gcc-c++ libtool openssl openssl-d ...

  6. iis6.0 建立站点

    公司网站的服务器甚多 其中还包括早期的iis6.0 的网站服务器 由于之前没有接触过 特此记录建立站点过程和注意事项 1.每个站点最好都新建一个用户名 方便管理 这里操作系统是 winXP 现在运行界 ...

  7. FMCW 雷达原理（转）

    FMCW(Frequency Modulated Continuous Wave),即调频连续波.FMCW技术和脉冲雷达技术是两种在高精度雷达测距中使用的技术.其基本原理为,发射波为高频连续波,其频率 ...

  8. linux 命令——51 lsof(转）

    lsof(list open files) 是一个列出当前系统打开文件的工具.在linux环境下,任何事物都以文件的形式存在,通过文件不仅仅可以访问常规数据,还可以访问网络连接和硬件.所以 如传输控制 ...

  9. js中arr.sort的用法

    sort(sortfunction)为JS的数组对象(Array)的一个方法,提供排序功能 参数 sortFunction 为可选项,是用来确定排序原则的js函数, 这个函数有两个参数,分别代表每次排 ...

  10. sql常识

    1.UNION与UNION ALL的区别UNION去重且排序UNION ALL不去重不排序2.sql语句or与union all的执行效率比较:union all>union> in &g ...