<!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">
</div>
<script type="text/javascript" src="../node_modules/vue/dist/vue.js">
</script>
<script type="text/javascript">
// 在Vue中指令是带有v-前缀的特殊特性，用处是当表达式
// 改变时，将其产生的连带影响，响应式地作用于DOM
// 常用的指令有v-if、v-text、v-html、v-show、v-for
// 了解下v-if和v-for的使用
new Vue({
el: '#app',
template: `
<div v-if='isSee'>if条件成立，所以你看见我了～将isSee设置为false你就看不见我了，不信你试试。
<ul>
<li v-for='item in foodList'>
<h1>{{ item.name }}</h1>
<h2>{{ item.price }}</h2>
</li>
</ul>
</div>
`,
data: function () {
return {
isSee: true,
foodList: [
{ name: '刀削面', price: '10￥' },
{ name: '宫保鸡丁', price: '15￥' }
]
}
}
})
</script>
</body>
</html>Vue之指令系统
程序员文章站
2024-02-01 18:27:52
...