prevent指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<form action="save" v-on:submit.prevent="submitForm">
<input type="text">
<button type="submit">提交</button>
</form>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el:'#app',
data: {
content: ''
},
methods: {
submitForm()
{
alert('submit form')
}
}
})
</script>
</body>
</html>
注意代码中的v-on:submit.prevent=“submitForm”，如果没有.prevent，那么即会执行提交动作也会弹出对话框，反之，不会自行提交动作，只是弹出alert窗口
条件指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="checkbox" v-model="ok">
<h1 v-if="ok">选中时显示</h1>
<h1 v-else="ok">不选中时显示</h1>
<h3 v-show="ok">选中时显示,dom树中不会删除</h1>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el:'#app',
data: {
ok: false
},
methods: {
}
})
</script>
</body>
</html>
使用的v-show的标签对应的节点不会从dom树中删除
