Vue.js 指令学习
程序员文章站
2022-05-15 22:45:10
...
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<!-- Hello World! -->
<div id="helloworld">
<p>HelloWorld元素</p>
<input v-model="message" placeholder="请输入...">
<p>消息是： {{message}}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#helloworld",
data:{
message: "Hello World !"
}
});
</script>
<br><br>
<input v-model="message" placeholder="edit me">
<p></p>
<br><br>
<!-- v-if:条件渲染指令，它根据表达式的真假来删除和插入元素
-->
<div id="vue_if">
<p>v-if指令</p>
<p v-if="yes">Yes</p>
<p v-if="no">No</p>
<p v-if="age>20">{{age}}</p>
age:<input v-model="age">
</div>
<script type="text/javascript">
var vif = new Vue({
el: "#vue_if",
data: {
yes: true,
no: false,
age: 25
}
});
</script>
<br><br>
<!-- v-show:使用v-show指令的元素始终会被渲染到HTML，它只是简单地为元素设置CSS的style属性
-->
<div id="vue_show">
<p>v-show指令</p>
<p v-show="yes">Yes</p>
<p v-show="no">No</p>
<p v-show="age>20">{{age}}</p>
age:<input v-model="age">
</div>
<script type="text/javascript">
var vshow = new Vue({
el: "#vue_show",
data: {
yes: true,
no: false,
age: 25
}
});
</script>
<br><br>
<!-- v-else: 可以用v-else指令为v-if或v-show添加一个“else块
v-else元素是否渲染在HTML中，取决于前面使用的是v-if还是v-show指令。
-->
<div id="vue_else">
<p>v-else指令</p>
age1:<input v-model="age1">
<p v-if="age1 > 25">{{age1}}</p>
<p v-else>{{age1}}</p>
<!--
age2:<input v-model="age2">
<p v-show="age2 > 25">{{age2}}</p>
<p v-else>{{age2}}</p>
-->
</div>
<script type="text/javascript">
var velse = new Vue({
el: "#vue_else",
data: {
age1: 50,
age2: 30
}
});
</script>
<br><br>
<!-- v-for 基于一个数组渲染一个列表
-->
<div id="vue_for">
<p>v-for指令</p>
<table>
<tr v-for="person in people">
<td>{{person.name}}</td>
<td>{{person.age}}</td>
<td>{{person.sex}}</td>
</tr>
</table>
</div>
<script type="text/javascript">
var vfor = new Vue({
el:"#vue_for",
data:{
people:[
{
name: "Jack",
age: 30,
sex: "男"
},
{
name: "Mari",
age: 15,
sex: "男"
},
{
name: "Dlt",
age: 55,
sex: "女"
}
]
}
});
</script>
<br><br>
<!-- v-bind：v-bind指令可以在其名称后面带一个参数，中间放一个冒号隔开，
这个参数通常是HTML元素的特性（attribute） -->
<div id="vue_bind">
<p>v-bind指令</p>
网站链接<input v-model="href"><br>
<a v-bind:href="href"
v-bind:target="target">
{{href}}
</a>
</div>
<script type="text/javascript">
var vbind = new Vue({
el: "#vue_bind",
data:{
href:"https://www.baidu.com",
target:"_blank"
}
});
</script>
<br><br>
<!-- v-on指令用于给监听DOM事件 -->
<div id="vue_on">
<p>v-on指令</p>
<button v-on:click="fun1">绑定方法</button>
<button @click="fun2('Hi')">内联方法</button>
</div>
<script type="text/javascript">
var von = new Vue({
el: "#vue_on",
data:{
message:"Hello World!"
},
methods:{
fun1: function(event){
console.log("绑定方法");
alert(this.message);
},
fun2: function(arg){
alert("点击：内联方法"+arg);
}
}
});
</script>
</body>
</html>
上一篇： HTTP协议的四种传参方式