首先使用npm i vue@2下载vue2版本的依赖
接下来开始接触vue
vue添加点击事件
<div id="app">
<!--v-on:click 简写 @click fn可以加括号 也可以不加 -->
<h1 @click="fn('我爱vue')">{{msg}}</h1>
<!-- {{}}里面还可以写表达式 -->
</div>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
new Vue({
/* 挂载点 */
el: "#app",
/* 数据 */
data: {
msg: "欢迎大家正式进入Vue的学习",
},
/* 定义方法的地方 */
methods: {
fn: function (str) {
alert(str)
}
},
})
</script>
vue条件判断
<!-- vue的条件判断v-if后面支持变量 也支持直接写布尔值 -->
<!-- 点击 输入你的爱好 如果你输入的是java 页面显示 我爱学习java 输入js 我爱学习js
'' 显示 -->
<button @click="fn2">点我</button>
<h1 v-if="str1=='java'">我爱学习java</h1>
<h1 v-else-if="str1=='js'">我爱学习javaScript</h1>
<h1 v-else>我什么都不爱学</h1>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
new Vue({
/* 挂载点 */
el: "#app",
/* 数据 */
data: {
str1: ''
},
/* 定义方法的地方 */
methods: {
fn2: function () {
let str = window.prompt('选择你喜欢的编程');
if (str == 'java') {
/* 使用this.给data中的数据赋值 */
this.str1 = 'java'
} else if (str == 'js') {
this.str1 = 'js'
}
}
},
})
</script>
vue实现点击只给选中的对象添加样式
<div id="app">
<ul>
<li
v-for="(item,index) in arr"
v-bind:key="item.id"
@click="choose(index)"
:style="{color:item.flag?'red':''}"
>{{item.title}} --- {{item.id}}</li>
</ul>
</div>
<script>
new Vue({
/* 挂载点 */
el: "#app",
/* 数据 */
data: {
arr: [{
id:0,
title:"一天某女子深夜造访涛涛",
flag:true,
},{
id:1,
title:"一天某女子深夜造访正见",
flag:false,
},{
id:2,
title:"一天某小学生深夜玩王者荣耀",
flag:false,
}],
},
/* 定义方法的地方 */
methods: {
choose:function(index){
/* 排他 */
this.arr.forEach(r=>{r.flag=false});
/* 把当前索引对象的flag改成true */
this.arr[index].flag = true;
}
},
})
</script>
