v-text指令
本质上就是一个表达式的命令，用于直接对数据进行渲染
<h2 v-text="massage"></h2>
等价于
<h2>{{ massage }}</h2>
区别在于v-text当中的数据会对原本标签里面的文本进行覆盖，而后者不会，并且前者进行字符串的拼接使用+'hello'这种模式，后者直接加在大括号后面即可
v-html指令
设置标签的innerHTML
如果显示的是简单的文本，与v-text没有区别
<h4 v-html="massage"></h4>
但是v-html还可以对html代码进行解析渲染
设置code值为代码块
code:"<a href='http://www.baidu.com'>a标签</a>",
使用v-html进行解析，会出现一个a标签的超链接
<h4 v-html="code"></h4>
v-on指令
为元素绑定事件
在使用v-on进行事件绑定，事件名不需要on。如下代码所示。给input标签绑定一个单击事件：
<input type="button" value="单击事件" v-on:click="doIt" />
或者使用@符号进行简化，如下所示
<input type="button" value="单击事件" @click="doIt" />
事件绑定之后，方法执行写在methods当中：如下所示
var app=new Vue({
el:"#app",
methods:{
doIt:function(){
alert("do It")
}
},
})
事件绑定之后在浏览器中单击查看结果。
改变元素的值
表示在单击某一个文本之后，修改这个文本的值。如何实现？
首先在data当中给定这个变量绑定值
data:{
food:"腐竹"
}
把这个属性值渲染到页面当中并且绑定一个单击事件
<h2 @click="changeFood">{{food}}</h2>
最后编写单击事件的方法，在这里使用this.food就可以获取到当前这个food对象的值。所以，直接对this.food进行修改即可！
changeFood:function(){
this.food+=" ! "
}
计数器案例实现
在浏览器当中有一个加号与减号，每按一次加号，数字加一，按一次减号，数字减一，且这个数只能在0-10之间，可以取到0和10；
第一步：编写前端显示的代码，两个按钮和一个显示数字的区域，数字直接从data当中渲染即可。并且对不一样的按钮绑定两个事件。
<div id="app">
<button @click="reduce">-</button>
<span>{{num}}</span>
<button @click="add">+</button>
</div>
第二步：添加单击事件的逻辑代码：
methods:{
reduce:function(){
if(this.num>0){
this.num--;
}else{
alert("这是最小值")
}
},
add:function(){
if(this.num<10){
this.num++;
}else{
alert("这是最大值")
}
}
},
之后直接在浏览器当中查看效果，如下图所示
v-show
表示当前是否显示，使用true和false进行判断。
在这里要实现一张图片，再定义一个按钮，当每按一次按钮，修改图片是否显示。
先定义图片与按钮并显示到浏览器当中，给按钮添加一个单击事件的方法。v-show的值在data当中定义isShow:true,
<div id="app">
<img v-show="isShow" src="../img/1.png" />
<br />
<input type="button" value="切换" @click="changeisShow" />
</div>
只需要在methods当中修改isShow的值即可
methods:{
changeisShow:function(){
this.isShow=!this.isShow
},
}
其次再添加一个只有当年龄大于18之后才能够查看的图片，同理，先在data当中给定age属性，如：age:15 ，同理在div当中添加图片给定设置
<img v-show="age>18" src="../img/1.png" />
<input type="button" value="add age" @click="AddAge" />
当每按一次按钮之后age加一，这样之后当age的值大于18之后就可以显示第二张图片了。添加方法到methods当中，如下所示
AddAge:function(){
this.age++,
alert(this.age)
}
最后看一下效果图：
v-if指令
效果与v-show一致，区别在于v-if是对标签代码进行删除还是添加。
与v-show大体一致的效果，代码如下所示：在按钮每单击一次之后修改值，即是否显示p标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, width=device-width,
initial-scale=1.0, maximum-scale=1.0">
<title>1</title>
<!--导入开发版的vuejs-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p v-if="true">p标签</p>
<p v-if="isShow">可以切换的p标签</p>
<button type="button" @click="toggelisShow">切换</button>
</div>
<script>
var app = new Vue({
el: "#app",
methods: {
toggelisShow: function() {
this.isShow = !this.isShow
}
},
data: {
isShow: false
}
})
</script>
</body>
</html>
v-bind指令
表示对标签属性进行绑定，如class 、src等
示例：在data当中将属性值进行保存，如下：
data: {
imgsrc: "../img/1.png",
imgtitle: "靓仔",
}
使用v-bind进行绑定：
<img v-bind:src="imgsrc" alt="" v-bind:title="imgtitle" />
在这里可以对v-bind进行省略，使用一个冒号即可
<img :src="imgsrc" alt="" :title="imgtitle" />
而对于类名class，通常使用一个逻辑类型的变量进行表示该class类名是否生效，先在data当中定义
isActive: true
然后在这里class可以使用一个三元表达式进行获取，而绑定一个单击事件对isActive的值进行来回切换
<img :src="imgsrc" alt="" :title="imgtitle" :class="isActive?'active':''" @click="toggleisActive" />
除了使用三元表达式，还可以直接使用对象获取isActive，这样相对于来说比较简洁
<img :src="imgsrc" alt="" :title="imgtitle" :class="{active:isActive}" @click="toggleisActive" />
把toggleisActive写在methods当中：
methods: {
toggleisActive: function() {
this.isActive = !this.isActive
}
},
并且在这里对active这个class添加一个样式，放在style标签当中，添加一个边框即可
border: red 2px solid;
运行项目查看效果，在单击之后这个红色边框会进行切换，实质上就是active这个class是否给定、
v-for指令
用于列表的多个渲染，如我们可以直接使用v-for获取数据渲染多个列表。可以对数组、对象进行渲染，并且我们可以添加两个按钮，绑定增加与删除对象当中的数据。具体代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-for</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<ul><li v-for="(item,index) in arr">索引 {{index}} 值 {{item}}</li></ul>
<h3 v-for="(item,index) in food" v-bind:title="item.name">{{item.name}}</h3>
<input type="button" value="add" @click="add" />
<input type="button" value="remove" @click="remove" />
</div>
<script>
var app = new Vue({
el: "#app",
methods: {
add: function() {
this.food.push({
name: "瓜皮"
})
},
remove: function() {
this.food.shift()
}
},
data: {
arr: [1, 2, 3],
food: [{name: "辣椒炒肉"},{name: "腐竹"}]
}
})
</script>
</body>
</html>
运行查看效果：
v-model指令
双向绑定值，用于表单的数据绑定与修改。测试代码如下：输入框最开始会获取message的值进行放置，在输入框当中修改值之后，message的值也会进行修改，最后还在按钮当中定义一个方法用于直接修改message的值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, width=device-width,
initial-scale=1.0, maximum-scale=1.0">
<title>1</title>
<!--导入开发版的vuejs-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="message" @keydown.enter="getEle"/>
{{message}}
<br />
<input type="button" value="重新设置" @click="setEle"/>
</div>
<script>
var app = new Vue({
el: "#app",
methods: {
getEle:function(){
alert(this.message)
},
setEle:function(){
this.message="长沙民政"
alert(this.message)
}
},
data: {
message:"hello changsha"
}
})
</script>
</body>
</html>
运行查看结果：
网页记事本的开发
增加、删除、清空、统计条数 功能模块，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>记事本</title>
<script src="../vue.js"></script>
<style>
html,body{
width: 100%;
height: 100%;
background-color: antiquewhite;
}
.all{
float: left;
margin-left: 500px;
}
</style>
</head>
<body>
<div class="all">
<div id="app">
<input type="text" v-model="message" @keydown.enter="save" />
<dl>
<dd v-for="(item,index) in messageArr" >{{index+1}} . {{item}}
<input type="button" value="X" @click="remove(index)" /></dd>
</dl>
<input type="button" @click="clear" value="clear" />
<span v-show="messageArr.length!=0">共 {{messageArr.length}} 条记录</span>
</div>
</div>
<script>
var app = new Vue({
el: "#app",
methods: {
save: function() {
this.messageArr.push(this.message)
alert("save")
this.message = ""
},
clear: function() {
this.messageArr = []
},
remove: function(index) {
this.messageArr.splice(index,1)
alert("remove OK")
}
},
data: {
messageArr: ["this is text", "this is p"],
message: " ",
}
})
</script>
</body>
</html>
查看效果
扫一扫
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
