<!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. Storm概念学习系列之事务

    不多说,直接上干货! 事务 这里的事务是专门针对Topology提出来的,是为了解决元组在处理失败重新发送后的一系列问题的.简而言之,事务拓扑(transactional topology)就是指St ...

  2. PHP面试题及答案(五)

    1. 禁用COOKIE 后 SEESION 还能用吗? 答案: 不能. 2. 抓取远程图片到本地,你会用什么函数? 答案: fsockopen(). 3.求两个日期的差数,例如2007-2-5 ~ 2 ...

  3. Quartz 定时器，同时运用多个定时器

    效果:每天执行两个定时器,两个定时器不相关联.jar版本Quartz 2.2.3 Java工程结构图  jar 包下载: 链接: https://pan.baidu.com/s/1-7dh620k9P ...

  4. Nagios-4.1.1 (OpenLogic CentOS 7.2)

    平台: CentOS 类型: 虚拟机镜像 软件包: apache2.4.6 nagios 4.1.1 php5.4.16 devops monitoring nagios open-source ph ...

  5. [VC]strcpy和strncoy的区别

    第一种情况:char* p="how are you ?";char name[20]="ABCDEFGHIJKLMNOPQRS"; strcpy(name,p ...

  6. UVA 1642 Magical GCD（gcd的性质，递推）

    分析:对于区间[i,j],枚举j. 固定j以后,剩下的要比较M_gcd(k,j) = gcd(ak,...,aj)*(j-k+1)的大小, i≤k≤j. 此时M_gcd(k,j)可以看成一个二元组(g ...

  7. linux 硬链接与软链接的区别

      硬链接的特点:不添加新文件 不能跨区建立 不能对目录建立 删除源文件硬链接正常访问   ln 源文件 目标链接文件   软连接的特点:会添加新文件 可以跨区建立 可以对目录建立 删除源文件软连接不 ...

  8. Java 发送邮件工具类

    1.  Mail.java package util; import java.util.Date; import java.util.Properties; import javax.mail.Au ...

  9. android studio 安装以及遇到的一些问题

    1 安装 jkd ,版本一般是最新的,下怎么样的看一下自己电脑符合那种要求,可以去官网下 https://www.oracle.com/technetwork/java/javase/download ...

  10. python读取txt写入txt

    http://www.cnblogs.com/allenblogs/archive/2010/09/13/1824842.html