前端（二十一）—— vue指令：文本类指令、避免页面闪烁、v-bind指令、v-on指令、v-model指令、条件渲染指令、列表渲染指令
文本类指令、v-bind指令、v-on指令、v-model指令、条件渲染指令、列表渲染指令
一、文本操作
- v-text：文本变量
<p v-text='msg'></p>
<p>{{ msg }}</p>
- v-once：一次性文本赋值，只能被赋值一次，后期无法更改
<p v-once>{{ msg }}</p>
- v-html：html文本变量，可以解析html标签
<p v-html='msg'></p>
<script>
new Vue({
el: '#app',
data: {
msg: '<b>文本</b>'
}
})
</script>
- v-model：双向数据绑定，控制表单元素的value值
<div id="app">
<input type="text" v-model='msg'>
<p>{{ msg }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
msg: ''
}
})
</script>
采用文本指令后，页面标签的内容由vue控制，原来用于标签的文本均会被vue中数据替换
- 文本操作案例
<body>
<div id="app">
<!-- html全局属性语法: 全局属性名="属性值" -->
<p v-bind:title="title" a="a" b="b">hello</p>
<!-- v-model也是对文本操作的指令,操作的是表单元素的value文本 -->
<input type="text" v-model="msg">
<!-- 采用文本指令后,页面标签的内容由vue实例控制,原来用于表示标签的文本均会被替换 -->
<p>{{ msg }}</p>
<!-- eg:原文本会被msg替换 -->
<p v-text='msg'>原文本</p>
<!-- 可以解析带html标签的文本信息 -->
<p v-html='msg'></p>
<!-- v-once控制的标签只能被赋值一次 -->
<p v-once>{{ msg }}</p>
</div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
// 指令: 出现在html标签中可以被vue解析处理的全局属性
new Vue({
el: "#app",
data: {
title: "",
msg: "message"
}
})
</script>
二、避免页面闪烁
- v-cloak：避免页面加载闪烁
<style>
[v-cloak] {
display: none;
}
</style>
<div id="app" v-cloak>
</div>
三、重要指令（v-bind、v-on、v-model）
1、v-bind：该指令绑定的是属性（html标签的全局属性）
**v-bind: 可以简写为 : **
<div :class='a'></div>
<!-- 值a，两个字符串嵌套使用表示普通字符串 -->
<div v-bind:class='"a"'></div>
<!-- 变量a -->
<div v-bind:class='a'></div>
<!-- 变量a, b，class由两个变量 a,b 同时控制 -->
<div v-bind:class='[a, b]'></div>
<!-- a为class值（类名），isA决定a是否存在(ture | false) ，即类名 a（显示 | 隐藏）-->
<div v-bind:class='{a: isA}'></div>
<!-- 多class值：是否存在，class的值（类名）为“a b”,isA与isB控制class的值是否存在 -->
<div v-bind:class='{a: isA, b: isB}'></div>
<!-- class的值（类名）为a b ，t与tt控制‘a b’是否存在 -->
<div v-bingd:class[{a:t}, {b:tt}]></div>
<!-- 多style值，my_color为变量，cyan为普通值 -->
<div :style='{color:my_color, background:"cyan"}'></div>
2、v-on: 绑定的是事件，操作的是事件对应的方法名
v-on: 简写为 @ ，即 v-on:click <====> @click
<!-- 绑定函数fn1，将事件event传递过去，回调时可以取到事件ev -->
<div v-on:click='fn1'></div>
<script>
new Vue({
el:"#app",
methods:{
fn1:function(ev){
console.log(ev);
}
}
})
</script>
<!-- 绑定函数fn2，并将自定义参数10传递过去，回调时只能取到自定义参数，事件参数ev丢失 -->
<div @click='fn2(10)'></div>
<script>
new Vue({
el:"#app",
methods:{
fn1:function(num){
console.log(num);
}
}
})
</script>
<!-- 绑定函数fn3，并将事件event与自定义参数10传递过去，回调时可以取到事件ev和自定义参数 -->
<!-- $event 事件参数为固定写法 -->
<div @click='fn2($event, 10)'></div>
<script>
new Vue({
el:"#app",
methods:{
fn1:function(ev,num){
console.log(ev);
}
}
})
</script>
3、v-model 数据具有双向绑定，绑定的是value，
<!--1. 两个input绑定同一个val，那么其中一个input的内容改变会映射到另一个input -->
<input type="text" v-model='val' />
<textarea v-model='val'></textarea>
<!--2. 单个复选框：选中与否val默认值为true|false ,true选框选中会向后台提交数据，false选框未选中，不向后台提交数据 -->
<input type="checkbox" v-model='val' />
<script>
new Vue({
el:"#app",
data:{
val:true // 设置默认为选中
}
})
</script>
<!--3. 通过true-value|false-value修改默认值为true|false -->
<input type="checkbox" v-model='val' true-value="选中" false-value="未选中" />
<!--4. 多个复选框：val作为数组[]来使用，可以存储选中元素的value值，反之数组有对应value代表该选框选中 -->
<!-- 出现在数组中的值为选中状态 -->
<!-- 出现在数组中的值为选中状态 -->
<input type="checkbox" value="basketball" v-model='val' />
<input type="checkbox" value="football" v-model='val' />
<input type="checkbox" value="pingpong" v-model='val' />
<script>
new Vue({
el:"#app",
data:{
val:["basketball"]
}
})
</script>
<!--5. 多个单选框：val存储选中的单选框的value值 -->
<!-- 变量val的值为哪个单选框中的value值，那么该单选框为选中状态 -->
<input type="radio" value="男" v-model='val' />
<input type="radio" value="女" v-model='val' />
<script>
new Vue({
el:"#app",
data:{
val:"男"
}
})
</script>
四、条件渲染
- v-if：值true会被渲染，值false不会被渲染
<div id="app">
<div v-if='isShow'>div div div</div>
<button @click='isShow = !isShow'>改变</button>
</div>
<script>
new Vue({
el: '#app',
data: {
isShow: true
}
})
</script>
- v-else：与v-if结合使用形成对立面
<div id="app">
<div v-if='isShow'>div div div</div>
<div v-else='isShow'>DIV DIV DIV</div>
<button @click='isShow = !isShow'>改变</button>
</div>
<script>
new Vue({
el: '#app',
data: {
isShow: true
}
})
</script>
- v-else-if：变量的多情况值判断
<div id="app">
<div v-if='tag == 0'>if if if</div>
<div v-else-if='tag == 1'>else if else</div>
<div v-else='tag == 2'>else else else</div>
<input type='number' min='0' max='2' v-model='tag' />
</div>
<script>
new Vue({
el: '#app',
data: {
tag: 0
}
})
</script>
- template：不被渲染的vue结构标签
<template v-if="isShow">
<p>用template嵌套</p>
<p>可以为多行文本</p>
<p>同时显隐</p>
<p>且template标签不会被vue渲染到页面</p>
</template>
- v-show：一定会被渲染到页面，以display属性控制显隐
- key：为v-if方式的显隐创建缓存，提高效率
<div id="app">
<div v-if='tag == 0' key='0'>if if if</div>
<div v-else-if='tag == 1' key='1'>else if else</div>
<div v-else='tag == 2' key='2'>else else else</div>
<input type='number' min='0' max='2' v-model='tag' />
</div>
<script>
new Vue({
el: '#app',
data: {
tag: 0
}
})
</script>
五、列表渲染
- v-for：循环渲染列表
<div id="app">
<ul>
<li v-for='item in items'>{{ item }}</li>
</ul>
<button @click='click'>改变</button>
</div>
<script>
new Vue({
el: '#app',
data: {
items: ['张三', '李四', '王五']
}，
methods: {
click: function () {
this.items.splice(1, 1, '李大大');
this.items.pop();
this.items.push('赵六')
}
}
})
</script>
- 遍历数组
// items: ['张三', '李四', '王五']
// 值
<ul>
<li v-for='item in items'>{{ item }}</li>
</ul>
<!-- 值, 索引，一般列表渲染需要建立缓存 -->
<ul>
<li v-for='(item, index) in items' :key="index">{{ index }} - {{ item }}</li>
</ul>
- 遍历对象
// {'name': '张三', 'age': 18, 'sex': '男'}
// 值
<div v-for="value in object">
{{ value }}
</div>
// 值, 键
<div v-for="(value, key) in object">
{{ key }}: {{ value }}
</div>
// 值, 键, 索引
<div v-for="(value, key, index) in object">
{{ index }}. {{ key }}: {{ value }}
</div>
- 嵌套数据渲染
// items: [{'name': '张三'}, {'age': 18}, {'sex': '男'}]
<div>
<div>{{ items[0].name }}</div>
<div>{{ items[1].age }}</div>
<div>{{ items[2].sex }}</div>
</div>
v-if、v-show与v-for案例
- v-if
<head>
<meta charset="UTF-8">
<title>条件渲染</title>
<style type="text/css">
.box {
width: 200px;
height: 200px;
}
.r {
background-color: red
}
.o {
background-color: orange
}
</style>
<style type="text/css">
ul {
margin: 0;
padding: 0;
list-style: none;
}
.wrap, .main {
width: 500px;
height: 240px;
}
li {
float: left;
background-color: #666;
margin-right: 20px;
}
ul:after {
content: "";
display: block;
clear: both;
}
.red {background-color: red}
.green {background-color: green}
.blue {background-color: blue}
</style>
</head>
<body>
<div id="app">
<ul>
<li @mouseover="changeWrap(0)">red</li>
<li @mouseover="changeWrap(1)">green</li>
<li @mouseover="changeWrap(2)">blue</li>
</ul>
<!-- red页面逻辑结构 -->
<div class="wrap red" v-if="tag == 0" key="0">...</div>
<!-- green页面逻辑结构 -->
<div class="wrap green" v-else-if="tag == 1" key="1">...</div>
<!-- blue页面逻辑结构 -->
<div class="wrap blue" v-else key="2">...</div>
</div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script>
new Vue({
el: "#app",
data: {
isShow: false,
tag:""
},
methods: {
changeWrap(num) {
this.tag = num;
}
}
})
</script>
- v-show
<style type="text/css">
.btn_wrap {
width: 660px;
margin: 0 auto;
}
.btn_wrap:after {
content: '';
display: block;
clear: both;
}
.btn {
width: 200px;
height: 40px;
border-radius: 5px;
float: left;
margin: 0 10px 0;
}
.box {
width: 660px;
height: 300px;
}
.b1 {background-color: red}
.b2 {background-color: orange}
.b3 {background-color: cyan}
.box_wrap {
width: 660px;
margin: 10px auto;
}
</style>
<div id="app">
<div class="btn_wrap">
<div class="btn b1" @click='setTag(0)'></div>
<div class="btn b2" @click='setTag(1)'></div>
<div class="btn b3" @click='setTag(2)'></div>
</div>
<div class="box_wrap">
<div class="box b1" v-show='isShow(0)'></div>
<div class="box b2" v-show='isShow(1)'></div>
<div class="box b3" v-show='isShow(2)'></div>
</div>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
tag: 0
},
methods: {
isShow (index) {
return this.tag === index;
},
setTag (index) {
this.tag = index;
}
}
})
</script>
- v-for
<div id="app">
<div>
<input type="text" v-model="inValue">
<button @click='pushAction'>提交</button>
</div>
<ul>
<li @click='deleteAction(index)' v-for="(item, index) in list" :key="index">{{ item }}</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
inValue: '',
list: []
},
methods: {
pushAction: function () {
this.list.push(this.inValue);
this.inValue = ''
},
deleteAction: function (index) {
this.list.splice(index, 1);
}
}
})
</script>
前端（二十一）—— vue指令：文本类指令、避免页面闪烁、v-bind指令、v-on指令、v-model指令、条件渲染指令、列表渲染指令的更多相关文章
- 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法
Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...
- 前端vue之属性指令、style和class、条件渲染、列表渲染、事件处理、数据双向绑定、表单控制、v-model进阶
今日内容概要 属性指令 style和class 条件渲染 列表渲染 事件处理 数据的双向绑定 v-model进阶 购物车案例 内容详细 1.属性指令 <!DOCTYPE html> < ...
- 前端之CSS字体和文本类属性
一.字体类属性: 1.字体类型: font-family:字体1,字体2,字体3; 常用写法: font-family:"微软雅黑",Arial; 注:a) 多个字体之间用逗号分隔 ...
- 前端MVC Vue2学习总结（四）——条件渲染、列表渲染、事件处理器
一.条件渲染 1.1.v-if 在字符串模板中,如 Handlebars ,我们得像这样写一个条件块: <!-- Handlebars 模板 --> {{#if ok}} <h1&g ...
- vue学习笔记(五)条件渲染和列表渲染
前言 在众多的编程语言中,我们的基础语法总是少不了一些专业语法,比如像定义变量,条件语句,for循环,数组,函数等等,vue.js这个优秀的前端框架中也有同样的语法,我们换一个名词,将条件语句改成专业 ...
- vue的条件渲染和列表渲染介绍
一.条件渲染 1.v-if语句 <div v-if="seen">hahahah</div> <!-- v-if插入或者删除元素的指令 --> ...
- vue 条件渲染与列表渲染
本文是对官方文档的整理 因为 v-if 是一个指令,所以必须将它添加到一个元素上.但是如果想切换多个元素呢?此时可以把一个 <template> 元素当做不可见的包裹元素,并在上面使用 v ...
- Vue.js学习 Item7 -- 条件渲染与列表渲染
v-if 在字符串模板中,如 Handlebars,我们得像这样写一个条件块: <!-- Handlebars 模板 --> {{#if ok}} <h1>Yes</h1 ...
- angular,vue,react的基本语法—双向数据绑定、条件渲染、列表渲染、angular小案例
基本语法: 1.双向数据绑定 vue 指令:v-model="msg" react constructor(){ this.state{ msg:"双向数据绑定" ...
- vue class与style绑定、条件渲染、列表渲染
列表渲染 根据我例子的需要,先来说下,列表渲染使用到的是v-for指令,需要使用 item in items 形式的特殊语法,items 是源数据数组并且 item 是数组元素迭代的别名,具体使用方法 ...
随机推荐
- AutoFac控制反转 转载https://blog.csdn.net/u011301348/article/details/82256791
一.AutoFac介绍 Autofac是.NET里IOC(Inversion of Control,控制反转)容器的一种,同类的框架还有Spring.NET,Unity,Castle等.可以通过NuG ...
- mysql定时任务(数据库管理工具and 纯命令行)
1.工具:Navicat 2.通过下列语句l爱查询event是否开启 打开Navicat命令列界面(点击工具可以看到或按F6) 输入下面命令 show variables like '%sche%'; ...
- JS对象中属性的增删改查
对象属于一种复合的数据类型,在对象中可以保存多个不同数据类型的属性 对象的分类: 1.内建对象 -在ES标准中定义的对象,在任何的ES的实现中都可以 ...
- 类的私有private构造函数 ，为什么要这样做
通常我们都将构造函数的声明置于public区段,假如我们将其放入private区段中会发生什么样的后果?没错,我也知道这将会使构造函数成为私有的,这意味着什么? 我们知道,当我们在程序中声明一个对象时 ...
- springboot整合netty，多种启动netty的方式，展现bean得多种启动方法
首先讲解下,spring中初始化加载问题: 很多时候,我们自己写的线程池,还有bean对象,还有其他的服务类,都可以通过,相关注解进行交给spring去管理,那么我们如何让nettyserver初始化 ...
- Android Service完全解析(上)
转载:http://blog.csdn.net/guolin_blog/article/details/11952435 相信大多数朋友对Service这个名词都不会陌生,没错,一个老练的Androi ...
- ios执行失去焦点，不执行点击事件
原因:由于JavaScript为单线程,同一时间只能执行处理一个事件.“blur优先于click执行”.而在本示例中,由于blur处理程序,会将对下拉框展示区隐藏,所以导致其后续click事件并不会执 ...
- PHP-移除元素
给定一个数组 nums 和一个值 val,你需要原地移除所有数值等于 val 的元素,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空间的条件下完成 ...
- python小项目（-）图片转字符画
# -*- coding: utf-8 -*- from PIL import Image codeLib = '''@B%8&WM#*oahkbdpqwmZO0QLCJUYXzcvunxrj ...
- 63. （FileInputStream）输入字节流
IO分类: 按照数据流向分类: 输入流 输出流 按照处理的单位划分: 字节流:字节流读取的都是文件中的二进制数据,读取到的 ...