二、Vue基础语法
六：Vue的v-bind指令作用：绑定标签上的所有属性其简写 ":"
6.1： 例如：<p v-bind:id="test">Hello world</p>====><p :id="test">Hello world</p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://vuejs.org/js/vue.min.js"></script>
<style>
.p-style1 {
background-color: aquamarine;
color: red;
} .bolder {
font-weight: bolder;
} .p-style2 {
background-color: rgb(, , );
color: blue;
}
[v-cloak] {
background-color: burlywood;
}
</style>
</head>
<body>
<div id="app">
<p v-bind:id="'pTest'"></p>
<p :id="idName"></p>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
idName: "dataP",
}
});
</script>
</body>
</html>
说明：<p v-bind:id=" 'pTest' "></p> //这个p标签的id号是pTest
<p :id="idName"></p> //这个p标签的id号是dataP
在ie浏览器上显示如下图
6.2:Vue的v-bind指令在：class=""等号右边的双引号可以使用js表达式：showStyle是data中的变量p-style1是顶部的css中的样式
<div id="app">
<p :class="showStyle?'p-style1':''">ppppppp</p>
</div>
<script>
var vm = new Vue({
el: document.getElementById("app"),
data: {
showStyle: true
}
});
</script>
</body>
</html>
在ie浏览器中显示如图所示
6.3Vue中的：class也可以向下面这个样子写
<div id="app">
<p :class="{'p-style1':showStyle}">pppppppp</div>
<script>
var vm = new Vue({
el: document.getElementById("app"),
data: {
showStyle: true
}
});
</script>
在ie浏览器中显示效果如图和6.2显示效果是一个样的
七、Vue的v-model双向数据绑定
1）v-model可以处理 input、textArea、select、radio、checkBox、button：该属性只能用在表达那标签，或有value属性的标签上。
2）v-cloak vue中自带的指令，作用是当加载完成后移除该指令属性，即我们希望任何在没有加载完成之前呈现的样式都可以同过v-cloak来渲染
3）v-once使用该指令，页面视图只渲染一次
7.1刚开始msg=Hello 通过v-model指令实现了双向数据绑定即msg=Hello world
<div id="app" v-cloak>
{{msg}}
<input type="text" v-model="msg">
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "Hello"
}
});
</script>
如图所示
7.2Vue实现range范围扩大和缩小
<div id="app" v-cloak>
{{msg}}
<br>
<input type="text" v-model="range">
<input type="range" v-model="range">
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: "Hello",
range:
}
});
</script>
在ie浏览器中显示的效果如图所示
二、Vue基础语法的更多相关文章
- python 全栈开发，Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)
一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...
- 2-5 vue基础语法
一.vue基础语法 语法: {{msg}} html赋值: v-html="" 绑定属性: v-bind:id="" 使用表达式: {{ok? "ye ...
- 一、vue基础语法（轻松入门vue）
轻松入门vue系列 Vue基础语法 一.HelloWord 二.MVVM设计思想 三.指令 1. v-cloak 2. v-text 3. v-html 4. v-show 4. v-pre 5. v ...
- Vue基础语法-数据绑定、事件处理和扩展组件等知识详解（案例分析，简单易懂，附源码）
前言: 本篇文章主要讲解了Vue实例对象的创建.常用内置指令的使用.自定义组件的创建.生命周期(钩子函数)等.以及个人的心得体会,汇集成本篇文章,作为自己对Vue基础知识入门级的总结与笔记. 其中介绍 ...
- Vue 1-- ES6 快速入门、vue的基本语法、vue应用示例，vue基础语法
一.ES6快速入门 let和const let ES6新增了let命令,用于声明变量.其用法类似var,但是声明的变量只在let命令所在的代码块内有效. { let x = 10; var y = 2 ...
- Vue（1）- es6的语法、vue的基本语法、vue应用示例，vue基础语法
一.es6的语法 1.let与var的区别 ES6 新增了let命令,用来声明变量.它的用法类似于var(ES5),但是所声明的变量,只在let命令所在的代码块内有效.如下代码: { let a = ...
- 零基础学习JavaSE（二）——基础语法
二.Java 基础语法 2.1 Java 基础语法 java是一个面向对象的程序语言,及可把一切事物当做对象处理,而java的事物中最小的就是class (类),类中有方法,类可以创建对象,并且有一些 ...
- 一、vue基础--语法
用到的前台编程工具是Visual Studio Code,暂时是官网下载vue.js到本地使用 一.Visual Studio Code需要安装的插件: jshint :js代码规范检查 Beau ...
- Bootstrap定制(二)less基础语法
前几日花了一天去看less,这几日在捣鼓其他东西,项目也在有序的进行中,今天花点时间整理下less的基础语法,也分享实际中的一些经验,与众人共享. 本篇笔者以less的基础语法着手,并配合bootst ...
- java(二、基础语法和基本数据类型)
Java 基础语法 一个Java程序可以认为是一系列对象的集合,而这些对象通过调用彼此的方法来协同工作.下面简要介绍下类.对象.方法和实例变量的概念. 对象:对象是类的一个实例,有状态和行为.例如,一 ...
随机推荐
- mysql正则匹配中文时存在的问题
可以看到,目前正则匹配字母没问题,c出现1次,2次,3次匹配的结果都是正常的 接下来我们看看匹配中文的效果 可以看到,当匹配连续出现歪时,结果就开始不正常了 然后我去看了下mysql的中文文档中关于正 ...
- Hadoop（学习·2）
Hadoop 操作步骤: 192.168.1.110-113 ...
- ubuntu上安装lamp环境命令清单
#install configuration manager sudo apt-get install tasksel #install basic lamp stack sudo tasksel i ...
- go 内置函数
一.什么是内置函数? 二.内置函数有哪些? 名称 说明 close 用于管道通信 len.cap len 用于返回某个类型的长度或数量(字符串.数组.切片.map 和管道):cap 是容量的意思,用于 ...
- 2017蓝桥杯等差素数（C++B组）
题目 : 等差素数列 2,3,5,7,11,13,....是素数序列.类似:7,37,67,97,127,157 ...
- MySQL学习之路3-MySQL中常用数据类型
MySQL中常用数据类型 字符型 存储字符型数据.例如姓名,地址,电话号码等.使用引号括起来,一般使用单引号. 常用类型: char(255) 定长字符串,最大长度255个字符. varchar(25 ...
- vue 全局自定义组件
1.vue文件 <template> <div style="position: absolute;bottom: 10px;text-align: center;widt ...
- 第一章：shell脚本初入门
1.shell脚本中的source或者.空格再加上文件,表示加载文件中的命令及语句(困惑多时终于解开^-^) 2.脚本开头书写好作者版本等信息,方便维护:流程语句提前把格式写好,防止遗漏 3.定义字符 ...
- Daily Scrum 12/24/2015
Process: Zhaoyang: Some UI change and compile the Caffe in the IOS. Yandong: Do some code integratio ...
- kioptrix靶机记录
靶机地址:172.16.1.193 Kali地址:172.16.1.107 首页为Apache测试页,没看到有价值信息 尝试目录扫描: 点击查看: http://172.16.1.193/index. ...