Vue常用的指令
程序员文章站
2022-05-15 13:45:22
...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue的指令系统</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
// v-text innerText 相对而言使用不多
// v-html innerHTML
// v-if是真正的条件渲染，DOM元素被切换的过程 被销毁和重建
// v-if 是懒惰的。如果初始条件为假，则什么都不做，直到渲染条件变为值，才会开始渲染条件块
// v-show 不管你的初始条件是什么，元素总是会被渲染，并且只是简单的基于css样式进行切换
// 一般来说， v-if 有更高的切换开销，v-show 有更高的初始渲染开销
// 关注的视图层
new Vue({
el: '#app',
template: `
<!-- 一定要有个根标签 闭合的标签-->
<div>
<div v-html = 'msg2'></div>
<div v-if = 'isShow'>哈哈哈哈</div>
<div v-show = 'isShow'></div>
<div v-if = 'Math.random() > 0.5'>
此值大于0.5
</div>
<div v-else>
此值小于0.5
</div>
<ul>
<li v-for = '(item,index) in menuLists'>
<h3>{{ index }}</h3>
<h5>{{item.name}}</h5>
<h4>{{item.price}}</h4>
</li>
</ul>
<ul>
<li v-for = '(value,key) in object'>
{{ key }} -- {{value}}
</li>
</ul>
</div>
`,
data: function() {
return {
msg: "指令系统",
msg2: "<h2>指令系统</h2>",
isShow: true,
menuLists: [{
id: 1,
name: '大腰子',
price: 60
},
{
id: 2,
name: '宫保鸡丁',
price: 30
},
{
id: 3,
name: '炸黄花鱼',
price: 20
}
],
object: {
name: '凃sir',
age: 18,
fav: '唱歌'
}
}
}
});
</script>
</body>
</html>
上一篇： 亲测可用：VUE实现图标按钮单选效果