注意：
1、所谓指令，其实就是元素的属性
2、所有的指令，前提是在js中声明了是Vue对象
3、参数
1、静态参数：一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML attribute：
<a v-bind:href="url">...</a>
此处的href是参数
<a v-on:click="doSomething">...</a>
v-on 指令，它用于监听 DOM 事件，在这里参数是监听的事件名
2、动态参数：可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：例如：（动态参数不是太理解）
<a v-bind:[attributeName]="url"> ... </a>
这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。例如，如果你的 Vue 实例有一个 data 属性 attributeName，其值为 "href"，那么这个绑定将等价于 v-bind:href。
同样的你可以使用动态参数为一个动态的事件名绑定处理函数：
<a v-on:[eventName]="doSomething"> ... </a>
在这个示例中，当 eventName 的值为 "focus" 时，v-on:[eventName] 将等价于 v-on:focus。
实例： 点击会有弹窗的出现
<a href="" id="add" v-on:[whos]="tanChuang">{{message}}</a>
<script>
var vm = new Vue({
el: "#add",
data: {
message: "张浩琦",
whos: "click",
},
methods: {
tanChuang: function() {
alert(123456)
}
}
})
</script>
3、在我们的模板中，我们一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
以下符合逻辑但是不是表达式的也不会生效
<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}
v-text指令
设置标签的文本值（textContent）
1、v-text已经将文本的内容替换，所以源文本的内容不会显示
2、{{content}}实在原来的文本的基础上进行拼接。
<div id="add">
v-text的使用：
<!-- h2的内容被message的v-text指向 -->
<h2 v-text="message">
<!-- 因为有v-text，所以{{info}}里面的内容显示不出来 -->
{{ info }}
<!-- </h2>
此时文本的内容 “深圳”也显示不出来 -->
<h2 v-text="info">
深圳
</h2>
{{}}的使用：
<!-- {{message}}表示拼接，所以此时的深圳可以显示出来 -->
<h2>
{{message}}深圳
</h2>
v-text拼接文本 ：
<!-- v-text拼接文本 -->
<h2 v-text="info+'我是v-text拼接的字符串'"></h2>
<!-- v-text插入多个属性文本 -->
<h2 v-text="info+message"></h2>
</div>
<script>
var app = new Vue({
el: "#add",
data: {
message: "黑马程序员",
info: "白马程序员"
}
})
</script>
v-once指令
通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：
<span v-once>这个将不会改变: {{ msg }}</span>
msg只随着属性的变化而变化一次
v-html指令
设置元素的innerHTML
1、更新文本的值，直接将原文本替换，和v-html差不多
2、当v-html指向的内容符合HTML标签的形式时，会生成新的标签。
<div id="add">
v-html更新文本
<!-- 黑马程序员被替换为白马程序员黄马程序员绿马程序员 -->
<span v-html="content+info+'绿马程序员'">黑马程序员</span>
v-html新增标签
<!--如果v-html指向的内容符合标签的形式，则生成一个html标签-->
<!-- 原div里面的内容全部都被替换，生成一个内容为程序员的span标签。 -->
<div v-html="message">
</div>
</div>
<script>
var vm = new Vue({
el: "#add",
data: {
content: "白马程序员",
info: "黄马程序员",
message: "<span>程序员</span>"
}
})
</script>
v-html和v-text的对比
<span v-html="weblink"></span><br> //显示的是一个百度链接
<span v-text="weblink"></span> //显示的是<a href='www.baidiu.com'>百度链接</a>
<script>
var vm = new Vue({
el: "#add",
data: {
weblink: "<a href='www.baidiu.com'>百度链接</a>"
}
})
</script>
v-on指令
为元素绑定事件 监听DOM事件
1、格式
1、<input type="button" value="事件绑定"v-on:事件名="方法">
2、<input type="button" value="事件绑定" @事件名="方法">
事件名为常用事件 click mouseover 等
2、点击事件
<input type="button" value="事件绑定" v-on:click="方法">
或者 v-on：换成@
<input type="button" value="事件绑定" @click="方法">
3、直接更改属性的值
<button v-on:click="foo = 'baz'">Change it</button>
4、Vue写方法
var app = new Vue({
el: "add",
data: {
message: "张浩琦",
foo:"123"
},
methods: {
dolt: function() {
//逻辑
}
}
})
5、触发函数
触发函数时会出现集中不同情况
1、一个按钮触发一个函数
无参数时 方法的名称可以不加小括号
<input type="button" id="add" value="点击触发函数" v-on:click="dolt">
2、一个按钮触发两个函数（两个函数都需要带小括号，执行顺序按照先后顺序）
<input type="button" id="add" value="点击触发函数" v-on:click="dolt()+dolttwo()">
<script>
var app = new Vue({
el: "#add",
data: {
message: "张浩琦",
},
methods: {
dolt: function() {
alert(this);
},
dolttwo: function() {
console.log(this); // this指的是当前创建的app这个Vue对象
console.log(this.message); //张浩琦
}
}
})
Vue的操作重在操作数据（文本域），而非操作Dom元素(操作Vue的时候时，需要使用this)
使用事件点击更改谋个标签的内容
点击之后，调用dolttwo方法，message的内容由张浩琦换成刘倩倩，span标签里面的内容也更改为现在的message内容
<span id="add" v-on:click="dolttwo">
{{message}}
</span>
<script>
var app = new Vue({
el: "#add",
data: {
message: "张浩琦",
},
methods: {
dolt: function() {
alert(this);
},
dolttwo: function() {
this.message = "刘倩倩"
//this.message+="刘倩倩";
函数每调用一次，message后面就添加一个刘倩倩
//this.message-="刘倩倩";
点击一次，显示Nan;
}
}
})
</script>
计数器的实战
0-10之间
<body>
<div id="pss">
<button class="one" @click="sub">减少</button>
<span class="one" v-text="message"></span>
<button class="one" @click="add">增加</button>
</div>
<script>
var vm = new Vue({
el: "#pss",
data: {
message: 0
},
methods: {
add() {
console.log(this)
if (this.message >= 10) {
this.message = 0;
} else {
this.message += 1;
// 或者
// this.message++;
}
},
sub() {
if (this.message <= 0) {
this.message = 10;
} else {
this.message -= 1;
// 或者
// this.message--;
}
console.log(this)
}
}
})
</script>
</body>
v-on补充
传递自定义参数，事件修饰符@keyup后的.XXX(https://cn.vuejs.org/v2/api/#v-on)
方法传递参数 <input type="button" @click="doIt(p1,p2)">
键盘监听（以回车为例）
<input type="text" @keyup.enter="sayHi('小铁',555)">
或者 <input type="text" v-on:keyup.enter="sayHi('小铁',555)">
如果不加.enter，则按键盘上的任意按钮，都会调用sayHi('小铁',555)的方法
<div id="add">
<!-- 鼠标 -->
<input type="button" value="老铁666" @click="doIt('老铁',666)">
<!-- 键盘 -->
<input type="text" @keyup.enter="sayHi('小铁',555)">
</div>
<script>
var vm = new Vue({
el: "#add",
data: {
},
methods: {
//含有参数的方法
doIt: function(p1, p2) {
console.log(p1, p2)
},
sayHi: function(p3, p4) {
console.log(p3, p4)
}
}
})
</script>
访问原生事件DOM对象$event
<div id="add">
<button v-on:click="warn($event)">访问原生事件对象</button>
//如果此处参数是event，则输出的时候会报错
</div>
<script>
var vm = new Vue({
el: "#add",
data: {
},
methods: {
warn: function(event) {
console.log(event)
}
}
})
</script>
v-show指令
根据表达值的真假，切换元素的显示和隐藏(其实是操作元素的display)
1、< img src="" v-show="true">;true显示，false不显示
2、v-show里面的值还可以加判断
<div id="add">
v-show="false" 标签元素不显示
<img src="./image/q1.jpg" alt="" v-show="false">
v-show="isShow" isShow的值为false 标签元素不显示
<img src="./image/q2.jpg" alt="" v-show="isHidde">
v-show="isShow" isShow的值为true 标签元素显示 点击不显示
<img src="./image/q2.jpg" alt="" v-show="isShow" @click="visPic">
v-show="age==16"显示，否则隐藏 此处v-show里面的值为boolean值
<img src="./image/q3.jpg" v-show="age==16" alt="" @click="addAge">
</div>
<script>
var vm = new Vue({
el: "#add",
data: {
isShow: true,
isHidde: false,
},
methods: {
visPic() {
//使isShow的值变为true
this.isShow = false
//或者
this.isShow = !this.isShow
},
//此方法每调用一次，age增加1
addAge() {
this.age++;
}
}
})
</script>
v-if指令
根据表达式的真假，切换元素显示和隐藏（操纵Dom元素，而非样式，v-show操纵的是样式）
1、用法和v-show完全一样，v-if改变的是Dom元素的添加或删除，v-show改变的是样式，不会新增加Dom元素和删除Dom元素的
2、实际工作中，频繁切换的元素用v-show，反之用v-if，因为操作Dom消耗比较大。
v-if和v-else的使用
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
<div id="add">
<h1 v-if="awesome">张浩琦</h1>
<h1 v-else>是的</h1>
<h1></h1>
</div>
<script>
var vm = new Vue({
el: "#add",
data: {
awesome: false //此时显示的是 是的
//当为true时 显示的是张浩琦
}
})
</script>
template元素，一个不可见的包裹元素
<div id="add">
<h1 v-else>是的</h1>
<h1></h1>
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
</div>
<script>
var vm = new Vue({
el: "#add",
data: {
ok: true //此时template里面包裹的元素都可以显示出来。 如果不添加vue指令，不管是直接在template元素里面添加内容还是添加元素，template里面的内容都显示不出来
}
})
</script>
v-else-if
<div id="add">
<template v-if="ok">
<h3 v-if="type===A">A</h3>
<h3 v-if="type===B">B</h3>
<h3 v-if="type===C">C</h3>
<h3 v-if="type===D">D</h3>
<h3 v-else>没有选项了啊</h3>
</template>
</div>
<script>
var vm = new Vue({
el: "#add",
data: {
ok: true, //此时template里面包裹的元素都可以显示出来。 如果不添加vue指令，不管是直接在template元素里面添加内容还是添加元素，template里面的内容都显示不出来
type: "132" //此时网页显示的是没有选项了啊
}
})
</script>
用key 管理可复用的元素
可复用元素举例 此处的表单元素即可复用元素 这样做其实是不符合实际的，要用key属性来解决
<div id="add">
<button v-on:click="change">点击切换</button>
<!-- 点击之后，元素的内容改变，但是input已经输入的值却不发生改变， -->
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username">
//更改为这个，元素里面的内容就会重新渲染，而不是重复使用 //<input placeholder="Enter your username" key="one">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address">
//这里也需要更改，不能和复用的元素的key值一样
//<input placeholder="Enter your username" key="two">
</template>
</div>
<script>
var vm = new Vue({
el: "#add",
data: {
loginType: "username",
},
methods: {
change: function() {
console.log(this.loginType)
this.loginType = "sef"
console.log(this.loginType)
}
}
})
</script>
v-bind指令
操作元素的属性（如：src，title，class等）
格式
1、< img v-bind:src ="imgSrc" >
2、< img v-bind:title="imgTitle+'123456'"> 拼接
3、< img v-bind:class="isActive?'active':''">三元表达式的形式表示判断,判断isActive的值，如果符合，class的属性值为active，如果不符合，class的属性值为空。（这种写法比较麻烦，可以采用对象的形式）
4、< img v-bind:class ="{active:isActive}"> 对象的形式表示判断，如果isActive的值为true，class的属性为active，否则class的属性为空
5、简写形式：< img :class ="{active:isActive}">（v-bind可以删除，但是在属性前需要加一个：）
<div id="add">
<!-- 为一个标签的属性赋予一个变量的值 -->
<img v-bind:src="imgSrc"></img>
为一个标签赋的属性赋予两个变量的值
<span v-bind:class="[classes,changeColor]">
<!-- 为一个标签的属性赋值，外加拼接 -->
<span v-bind:title="imgTitle+'我是拼接的部分'">啦啦啦啦啦</span>
<div v-bind:class="'active'+' '+'bgBorder'">
<img src="./image/q2.jpg" alt="">
</div>
<div>
<!-- 对象形式判断条件是否成立，成立变为块元素，不成立变为行元素 -->
<span v-bind:class="{active:judge}">添加一个属性值</span>
<!--待解决-->
<!-- <span v-bind:class="{classes:judge}">判断并把vue对象的属性值作为此标签的class值</span> -->
<br>
<!-- 三元表达式形式判断添加一个和两个class属性值 -->
<span v-bind:class="judge?'active':''">添加一个属性值</span>
<span v-bind:class="judge?'active bgBorder':''">添加两个属性值</span>
</div>
</div>
<script>
var vm = new Vue({
el: "#add",
data: {
imgSrc: "./image/q1.jpg",
imgTitle: "这是一个标签",
judge: true,
classes: "fonts"，
changeColor: "red"
}
})
</script>
综合写法
<div id="demo">
<span :class="[one,{classA:classa,classB:classb}]"></span>
</div>
var vm = new Vue({
el:"#demo",
data:{
one:"string",
classa:true,
classb:false
}
})
效果 <span class = "string classA">
5、遗留问题
待解决
问题一：判断并把vue对象的变量作为此标签的class值
<span v-bind:class="{classes:judge}">判断并把vue对象的属性值作为此标签的class值</span>
//此时添加的span标签的class的属性值为classes而非fonts
解决方式：
问题二： 如何用对象的形式一次添加两个属性值
对象形式判断条件是否成立，成立变为块元素，不成立变为行元素
<span v-bind:class="{active:judge}">添加一个属性值</span>
解决措施:两个属性值判断之间用逗号隔开
<span v-bind:class="{active:judge,fonts:judge}">添加一个属性值41564156416</span>
var vm = new Vue({
el: "#add",
data: {
imgSrc: "./image/q1.jpg",
imgTitle: "这是一个标签",
judge: true,
classes: "fonts"
}
})
v-bind指令的详细补充 包括样式的改变
修改class和style， v-bind指令与一半属性共存
对象语法
样式一：
.static {
width: 100px;
height: 100px;
border: 1px solid red;
}
.backgroundcolor {
background-color: green;
}
.divBig {
width: 200px;
height: 200px;
}
<div id="add" class="static" 一半属性class 还可以添加v-bind属性 v-bind:class="{divBig:classOne,backgroundcolor:classTwo}">
<span>1234656</span>
</div>
<script>
var vm = new Vue({
el: "#add",
data: {
classOne: true, 如果classOne为false，则divBig此类名属性则无法发挥作用
classTwo: true
与上同理
}
})
</script>
样式二：将所有的样式写在一个属性对象中
.active {
width: 100px;
height: 100px;
background-color: red;
}
<div id="add" v-bind:class="classObject"></div>
<script>
var vm = new Vue({
el: "#add",
data: {
classObject: {
//此时的类名为active
active: true,
' text-danger': false
}
}
})
</script>
使用计算属性（看不懂）
<div id="app" v-bind:class="classObject">
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
active: true,
error: null
},
computed: {
classObject: function() {
return {
active: this.active && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}
})
</script>
数组语法
可以把一个数组传给 v-bind:class，以应用一个 class 列表：
样式一：将对象存入到数组中
.active {
width: 100px;
height: 100px;
}
.error {
background-color: red;
}
<div id="add" v-bind:class="[activeClass,errorClass]">
</div>
<script>
var vm = new Vue({
el: "#add",
data: {
activeClass: "active",
errorClass: "error",
}
})
</script>
样式二：三元表达式形式
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
.active {
width: 100px;
height: 100px;
}
.error {
background-color: red;
}
<!-- 三元表达式，判断属性 -->
<div id="add" v-bind:class="[activeClass,panduan?'':errorClass]">
</div>
<script>
var vm = new Vue({
el: "#add",
data: {
activeClass: "active",
errorClass: "error",
panduan: false,
}
})
</script>
对象语法在数组中使用
.active {
width: 100px;
height: 100px;
}
.error {
background-color: red;
}
.question {
border: 10px solid black;
}
<!-- 数组语法和对象语法的混合使用 -->
<div id="add" v-bind:class="[{active:activeClass,error:errorClass},questionClass]"></div>
<script>
var vm = new Vue({
el: "#add",
data: {
activeClass: false,
errorClass: true,
questionClass: "question"
}
})
</script>
用在组件上（没有操作过，官方原文档）
当在一个自定义组件上使用 class 属性时，这些 class 将被添加到该组件的根元素上面。这个元素上已经存在的 class 不会被覆盖。
例如，如果你声明了这个组件：
Vue.component('my-component', {
template: '<p class="foo bar">Hi</p>'
})
然后在使用它的时候添加一些 class：
<my-component class="baz boo"></my-component>
HTML 将被渲染为:
<p class="foo bar baz boo">Hi</p>
对于带数据绑定 class 也同样适用：
<my-component v-bind:class="{ active: isActive }"></my-component>
当 isActive 为 truthy[1] 时，HTML 将被渲染成为：
<p class="foo bar active">Hi</p>
绑定内联样式
v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：
当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀。
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。
<div id="add" v-bind:style="[{color:activeColor,fontSize:fontSize+'px'},styleObject]">
张浩琦
</div>
<script>
var vm = new Vue({
el: "#add",
data: {
activeColor: 'yellow',
fontSize: '30',
styleObject: {
border: "20px solid red",
width: "200px",
height: "200px"
}
}
})
</script>
使用方法和class的更改差不多
v-for指令
根据数据生成列表结构（列表的生成依赖数据，所以在data里面建立）
v-for指定的内容会随着vue对象的数据的改变而进行dom节点数量的改变
语法：
语法一：列表的每一项内容为数组的内容（列表里面如果有原内容，则原内容每一次都会被打印）
<div id="app>
<ul>
<li v-for="item in arr">张浩琦{{item}}</li>
//item是遍历的每一项，可以改名字，但是得遵循命名规则
//in 关键字 不能修改
//arr 要循环的数据名
//如果li标签里面原本就有内容，例如“张浩琦”，那么遍历的每一项数据生成的节点都是张浩琦
</ul>
</div>
var app = new Vue({
el:"#app",
data:{
arr:[1,2,3,4,5]
}
})
结果
张浩琦
张浩琦
张浩琦
张浩琦
张浩琦
语法中的内容不一样
内容用一个对象储存
<html>
<div id="edd">
<ul>
<button @click="add">增加</button>
<button @click="remove">移除</button>
<li v-for="item in objArr" v-bind:title="item.name">
{{item.name}}
</li>
</ul>
</div>
<script>
var am = new Vue({
el: "#edd",
data: {
//绑定一个对象的数组
objArr: [{
name: "张浩琦"
}, {
name: "刘倩倩"
}, {
name: "花粥"
}]
},
methods: {
add: function() {
//push增加 方法，方法没执行一次，对象数组objArr里面增加一个对象“张雨墨”
this.objArr.push({
name: "张雨墨"
})
},
remove: function() {
//shift() 删除最左边的元素，方法每执行一次，数组里面就移除一个objArr最里面的一个对象
this.objArr.shift()
}
}
})
内容显示出数据的索引
<li v-for="(item,index) in arr">
{{index}}{{item}}
</li>
var bm = new Vue({
el: "#app",
data: {
arr: [1, 2, 3, 4, 5]
}
})
v-for里使用值范围
<div id="add">
<li v-for="n in 10">{{n}}</li>
</div>
<script>
var vm = new Vue({
el: "#add",
data: {
}
})
</script>
结果1-10
v-model（model 模型；典型；模特儿）
便捷获取和设置表单元素的值（双向数据绑定） 需要和表单元素一起使用
双向绑定即当message的内容改变，表单的内容会随着改变，表单的内容改变，message的内容也会随着改变
<div id="add">
<input type="text" v-model="message">
<!-- span里面的内容会随着message的变化而变化，message会随着表单录入的内容变化而变化 -->
<span>{{message}}</span>
<input type="button" value="点击更改message的内容为刘倩倩" @click="add">
</div>
<script>
var vm = new Vue({
el: "#add",
data: {
message: "张浩琦"
},
methods: {
add: function() {
this.message = "刘倩倩"
}
}
})
</script>
修饰符（不是太清楚）
.lazy（懒加载）
在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：
<div id="add">
没有.lazy
<input type="text" v-model="message" v-on:change="nub">
<!-- 当表单中的值发生改变时，会调用nub方法，但是v-model控制的对象属性导致表单的值发生改变时，并不会调用nub方法 -->
<button v-on:click="change">点击更改</button>
加上.lazy
<input type="text" v-model.lazy="message">
<span>
{{message}}
</span>
span中的值并不会随着message的改变而同步改变，只有表单失去焦点时，span中的值才会同步改变，类似于change
</div>
<script>
var vm = new Vue({
el: "#add",
data: {
message: "张浩琦"
},
methods: {
change: function() {
this.message = "刘倩倩"
},
nub: function() {
alert("15465")
}
}
})
</script>
<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >
.number
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：
<input v-model.number="age" type="number">
这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。
.trim
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：
<input v-model.trim="msg">
.ref像v-model一样，实现数据的双向绑定（主要是为了获取当前的元素对象input对象）
<div id="add">
<!-- ref目的：获取表单的内容，并把内容赋值给span标签，间接实现双向绑定 类似于v-model -->
<!-- 获取表单的内容要获取事件，此处使用的是keyup，键盘每按下一次，就调用一次方法 -->
<input type="text" ref="name" @keyup="getName">
<span>{{name}}</span>
<input type="text" ref="age" @keyup="getAge">
<span>{{age}}</span>
</div>
<script>
new Vue({
el: "#add",
data: {
name: " ",
age: 32
},
methods: {
getName: function() {
console.log(this.$refs);
// 相当于ref的父级，包含了标签中ref的所有内容 所以此处输出的也有age的内容
},
getAge: function() {
console.log(this.$refs.age.value);
}
}
})
</script>
项目实战
小黑记事本项目
学到的内容
1、数组元素的长度 content.length
2、 this.content.splice(index, 1); 删除指定的索引内容，如果是2，则删除当前索引内容和之后的那个索引内容
<div id="littleBlack">
<!-- 回车键向表格中录入内容，q键清除表格中的所有内容 -->
<input type="text" v-model="message" @keyup.enter="addContent" @keyup.q="clearAll">
<ul>
<li v-for="(item,index) in content" @click="remove(index)">{{index+1}}{{item}}</li>
</ul>
<!-- 统计列表中元素的个数即统计数组的长度 当数组的长度为0时，隐藏此项功能-->
<span v-text="'个数'+content.length" v-if="content.length!=0"></span>
</div>
<script>
var vm = new Vue({
el: "#littleBlack",
data: {
message: "泡面",
content: ["吃饭饭", "睡觉觉", "敲代码"]
},
methods: {
addContent: function() {
this.content.push(this.message);
this.message = " ";
},
remove: function(index) {
console.log(index);
//splice(index,1)删除指定的索引，一次删除一个元素 如果是2删除索引和索引后面的元素
this.content.splice(index, 1);
},
clearAll: function() {
this.content = " ";
}
}
})
</script>
网友评论