<!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. Java文件与io——NewIO

    为啥要使用NIO? NIO的创建目的是为了让JAVA程序员可以实现高速I/O而无需编写自定义的本机代码.NIO将最耗时的I/O操作(即填充和提取缓冲区)转移回操作系统,因而可以极大地提高速度 流与快的 ...

  2. Linux系统配置双网卡绑定bond0

    1.bonding简述 双网卡配置设置虚拟为一个网卡实现网卡的冗余,其中一个网卡坏掉后网络通信仍可正常使用,实现网卡层面的负载均衡和高可用性.现在一般的企业都会使用双网卡接入,这样既能添加网络带宽,同 ...

  3. [知乎作答]·关于在Keras中多标签分类器训练准确率问题

    [知乎作答]·关于在Keras中多标签分类器训练准确率问题 本文来自知乎问题 关于在CNN中文本预测sigmoid分类器训练准确率的问题?中笔者的作答,来作为Keras中多标签分类器的使用解析教程. ...

  4. Spring+Junit+Mock测试web项目，即Controller

    准备:Maven依赖 <!-- Spring和MVC的包这里不列出来了,webmvc,aspects,orm,其他maven会自动导 --> <dependency> < ...

  5. static修饰的类属性

    我看书上说:static成员总是唯一存在的,并且在多个对象之间互享. 因此想到,如果我在a.php中实例化了Person.class.php这个类,并给static $name赋值,那么在b.php中 ...

  6. Docker | 第七章：Docker Compose服务编排介绍及使用

    前言 前面章节,我们学习了如何构建自己的镜像文件,如何保存自己的镜像文件.大多都是一个镜像启动.当一个系统需要多个子系统进行配合时,若每个子系统也就是镜像需要一个个手动启动和停止的话,那估计实施人员也 ...

  7. asp.net MVC 4.0 Model元数据回顾——HtmlHelper的ModelMetadata

    模板方法包括Display/DisplayFor.Editor/EditorFor.DisplayForModel/EditForModel提供辅助生成Html的模型元数据信息 public stat ...

  8. 在MFC对话框中快速集成三维控件

    在MFC的对话框中可以方便的集成AnyCAD三维控件(c++版本),遵循一下几步: 1.在对话框资源中增加一个Static控件,ID为IDC_STATIC_3D,并且把它的Notify属性设置为Tru ...

  9. nginx fpm生产环境的权限设置

    http://www.2cto.com/Article/201307/231770.html

  10. CSS单词换行and断词，你真的完全了解吗

    背景 某天老板在群里反馈,英文单词为什么被截断了? 很显然,这是我们前端的锅,自行背锅.这个问题太简单了,css里加两行属性,分分钟搞定. 开心的提交代码,刷新页面.我擦,怎么还是没有断词?不可能啊! ...