您的位置：首页 > 产品设计 > UI/UE

Vue.js的常用指令-vue.js

2016-09-13 14:40 761 查看
vue.js的常用指令

vue.js是指令已v-开头的，他们作用于HTML元素，指令提供了一些特殊的特性，将指令绑在元素上时，指令回味绑定的目标元素添加一些特殊的行为，我们可以将指令看做特殊的HTML特性

vue.js提供了一些常用的内置指令，接下来我们将介绍v-if指令

v-if是条件渲染指令，他根据表达式的真假来删除和插入元素，它的基本语法如下:

v-if=”expression”

expression是一个返回bool值的表达式，表达式可以使一个bool属性，也可以返回一个bool的运算时。列如：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<h1>Hello, Vue.js!</h1>
<h1 v-if="yes">Yes!</h1>
<h1 v-if="no">No!</h1>
<h1 v-if="age >= 25">Age: {{ age }}</h1>
<h1 v-if="name.indexOf('jack') >= 0">Name: {{ name }}</h1>
</div>
</body>
<script src="js/vue.js"></script>
<script>

var vm = new Vue({
el: '#app',
data: {
yes: true,
no: false,
age: 28,
name: 'keepfool'
}
})
</script>
</html>


注意：yes no age name 这四个变量都来源于vue实例选项对象的DATA属性
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  Vue-v-if vue v-if
相关文章推荐
新的分享
章节导航