<!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 添加模块

    一.方法1: 单文件模块直接把文件拷贝到 $python_dir/Lib 二.方法2: 多文件模块,带setup.py 下载模块包,进行解压,进入模块文件夹,执行:python setup.py in ...

  2. Python3.5 调用Ansible 执行命令

    ansible.py #!/usr/bin/env python3 # -*- coding: utf-8 -*- import os import tempfile from collections ...

  3. Zookeeper问题汇总

    1. 遗留问题 a). zookeeper集群如何保证请求的均匀分布? 2. ZK概念澄清 2.1 ZK节点类型 CreateMode.PERSISTENT //持久节点,该节点客户端断开后不会删除 ...

  4. case 范围取值

    你可以在单个case标签中指定一系列连续的值,就像这样:   case low ... high: 这和单独的case标签的合适数字有同样的效果,每个对应包含在从low到high中的一个整数值. 这个 ...

  5. Unity3d开发的第一个实例

    1.untiy3d开发环境配置好以后,开始我的第一个开发实例 2.在Hirearch---create---3DObject---Cube,在场景中创建一个正方体 3.project---create ...

  6. .net core mvc全局设置跨域访问

    public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory ...

  7. Linux软件相关记录

    Pidgin+lw-web的聊天记录的文件对应的目录为.purple/logs/webqq/你的QQ号码/,进入之后有选择的删除. mkdir -p 递归创建目录:pwd 显示当前目录:cd .. 回 ...

  8. 微信小程序：从本地相册选择图片或使用相机拍照。

    wx.chooseImage(OBJECT) 从本地相册选择图片或使用相机拍照. OBJECT参数说明: 示例代码: wx.chooseImage({ count: 1, // 默认9 sizeTyp ...

  9. Wince 6.0获取设备的分辨率 自动设置窗体位置

    调用微软提供给wince的API  “coredll.dll” [DllImport("coredll.dll")] public static extern int GetSys ...

  10. log4j-初识

    1.配置文件介绍: 1.1. 控制台输出:log4j.rootLogger=DEBUG, Console ,File #Console log4j.appender.Console=org.apach ...