一，VUE的V-家族成员
var好久不见 前几天我和VUE相识 现在带大家认识一下他们
一 ，v-for---遍历指令
V-for带来的效果是让你在短的时间内输出你需要看到的数组内的内容，通过并列的方式
二，v-domel---双向指令
<body>
<div id="box">
<input type="text" v-model="dome">
{{dome}}
</div>
<script src="js/vue.js"></script>
<script>
var vm=new Vue({
el:"#box",
data:{
dome:"天王盖地虎"
}
})
</script>
</body>
简单来说 v-model其实就是一个双向选择器编辑器，你在标签内做什么，script里对应的代码也会改变值。
三，v-on---事件触发者
<body>
<div id="box">
<ul>
<li v-for="value in arr">{{value}}</li>
</ul>
<button v-on:click="qwe"></button>
</div>
<script src="js/vue.js"></script>
<script>
var vm=new Vue({
el:"#box",
data:{
dome:"天王盖地虎",
arr:['往后一生','听风十里','全都是你']
},
methods:{
qwe:function(){
this.arr=['史密斯·乔布斯','斯密斯·沃兹']
}
}
})
</script>
</body>
v-on其实就是简单的函数调用 在这里你可以直接触发事件类型 达到你要的效果
四，v-if ,v-else以及v-else-if ---判断者
<body>
<div id="box">
<p v-if="Math.random>=6">{{demo}}</p>
<p v-else-if="Math.random>=3"> {{demo1}} </p>
<p v-else-if="Math.random>=1"> {{demo2}} </p>
<p v-else> {{demo3}} </p>
</div>
<script src="js/vue.js"></script>
<script>
var vm=new Vue({
el:"#box",
data:{
dome:"天王盖地虎",
demo1:'往后一生',
demo2:'听风十里',
demo3:'全都是你'
}
})
</script>
</body>
</html>
if就是判断 else-if 就是条件判断 else就是最终判断
五，v-show---显示隐藏
<body>
<div id="box">
<p v-show="see">
<ul>
<li v-for="ren in arr">{{ren}}</li>
</ul>
</p>
</div>
<script src="js/vue.js"></script>
<script>
var vm=new Vue({
el:"#box",
data:{
see:true,
dome:"天王盖地虎",
arr:['往后一生','听风十里','全都是你']
}
})
</script>
</body>
v-show 负责的就相对简单多了 只负责将该元素标签隐藏或显示
六，v-bind---CSS属性添加
<style>
.active {
width: 100px;
height: 100px;
background: green;
}
.text-danger {
background: red;
}
</style>
</head>
<body>
<div id="app">
<div class="static"
v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
isActive: true,
hasError: true
}
})
</script>
</body>
</html>
v-bind是元素标签的头 他可以规定你的元素标签在 style 里的内容能不能使用
不被待见的群花
div class='nr'>
<input type="text" v-model="add">
<p v-html="add">{{add}}</p> （可识别标签，并运用）
<h3 v-text="add">{{add}}</h3> （不识别标签，直接输入）
<span v-once>{{add}}</span> （输出第一次add中的内容，不改变）
<h1 v-pre>{{add}}</h1> （输出{{add}}）
</div>
<script src='此处链接js插件'></script>
<script>
new Vue({
el:".nr",
data:{
add:'新的属性'
}
})
</script>
网友评论