<!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. Python package和folder

    在Python项目里面的区分,按照如下规定进行: 1.严格区分包和文件夹.包的定义就是包含__init__.py的文件夹. 如果没有__init__.py,那么就是普通的文件夹. 2.导入packag ...

  2. Kotlin基础知识

    1. 改进点/基础 //安全判空 val length = text?.length; //类型转换 if (object is Car) { var car = object as Ca } //操 ...

  3. Timer控制开始、停止例子【转】

    public partial class Form1 : Form    {       static public bool flag;         public Form1()        ...

  4. linq 读取xml

    xml 文件如下: <?xml version="1.0" encoding="utf-8" ?><nodes> <node> ...

  5. IO模型与soketserver实现并发

    一 IO模型介绍 为了更好地了解IO模型,我们需要事先回顾下:同步.异步.阻塞.非阻塞 同步(synchronous) IO和异步(asynchronous) IO,阻塞(blocking) IO和非 ...

  6. 1074 食物链 2001年NOI全国竞赛

    1074 食物链 2001年NOI全国竞赛 时间限制: 3 s 空间限制: 64000 KB 题目等级 : 钻石 Diamond         题目描述 Description 动物王国中有三类动物 ...

  7. Javascript Number

    Number 对象 Number对象是原始值的包装对象 创建Number对象的语法: var myNum = new Number(value): var myNum = Number(value): ...

  8. arcgis textsymbol overlap

    arcgis  textsymbol   overlap   textsymbol  重叠的问题  du?de?  duration??    arcgis  for  javascript 如何避免 ...

  9. dsniff

    /usr/local/sbin/dsniff 这个东西好强大,获取到用户名和密码 bt服务区器上:dsniff -i eth0 -m(自动协议检测) 在另外一个电脑上打开网页,登陆ftp服务器,回头看 ...

  10. C#访问修改符

    修饰符可以指定访问的可见性,还可以指定其本质.(文章摘自<C#高级编程(第9版)>以及Microsoft) 1. 可见性修饰符 public:应用于所有类型或成员,即任何代码均可以访问该项 ...