今日内容
1.插值语法
2.文本指令
3.属性指令
4.事件指令
5.class和style
6.条件渲染
7.列表渲染
1.插值语法
插值语法中可以放:变量，对象取值，数组取值,简单的js语法,函数()
插值不能写在标签的属性上，只能写在标签内部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<p>名字:{{name}}</p>
<p>年龄:{{age}}</p>
<p>爱好:{{hobby}}----->第一个爱好：{{hobby[1]}}</p>
<p>妻子:{{wife}}----》妻子的年龄:{{wife.age}}---{{wife['age']}}</p>
<p>运算:{{10*2+3*4}}</p>
<p>三目运算符【条件?'符合了':'不符合了'】:{{10>90?'大于':'小于'}}</p>
<p>标签（默认不会渲染成标签）:{{a_url}}</p>
<p>函数()</p>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'lqz',
age: 19,
hobby: ['篮球', '足球', '乒乓球'],
wife: {name: '刘亦菲', age: 38},
// 运算
a_url: '<a href="http://www.baidu.com">点我看美女</a>'
// 三目运算符 三元表达式
}
})
</script>
</html>
2.文本指令
指令系统
v-xx 写在标签上，任意标签
v-xx="" ----》原来插值语法中能写的，它都能写，不要再加 {{}}
指令系统：vue提供的 都是 v-xx 写在标签属性上的 ，统称为指令，例如，a_url必须是data中定义的变量
<p v-text="a_url"></p>
v-text直接把字符串内容渲染在标签内部，等同于
<p v-text="a_url"></p>
<p>{{a_url}}</p>
v-html 把字符串的内容渲染成标签，写在标签内部
<p v-html="a_url"></p>
v-show 等于布尔值，该标签是否显示 样式控制显示不显示：style="display: none;"
v-if 等于布尔值，该标签是否显示 整个标签之间删除，效率低，在dom中删除标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h2>v-text</h2>
<p v-text="a_url"></p>
<h2>v-html</h2>
<p v-html="a_url"></p>
<h2>v-show</h2>
<img src="https://img2.woyaogexing.com/2023/02/10/f426aeefcf78b0f6e88bba4e67437409.jpeg" alt="" v-show="show" width="200px" height="200px">
<h2>v-if</h2>
<div v-if="show_if">
<img src="https://img2.woyaogexing.com/2023/02/13/0253c158c222e0db0ea0bf68df21d315.jpeg" alt="" width="200px" height="200px">
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
a_url: '<a href="http://www.baidu.com">点我看美女</a>',
show: true,
show_if:true
}
})
</script>
</html>
3.属性指令
标签上的属性可以绑定变量，以后变量变化，属性的值跟着变化
href
src
name
class
style
height
语法
v-bind:属性名="变量名"
可以简写成，以后都用简写
:属性名="变量名"
4.事件指令
事件指令是：点击事件，双击事件，滑动事件 用的最多的是点击事件click
v-on:事件名='函数'
<button v-on:click="handleClick">点我看美女</button>
函数必须写在methods的配置项中
methods:{
'handleClick':function (){
alert('美女')
console.log(this) this 就是当前vue实例，就是vm实例
this.show=!this.show
},
}
点击button就会触发绑定函数（handleClick）的执行
可以简写成，以后都用简写
@事件名='函数'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="handleClick">点我看美女</button>
<div>
<img :src="url" alt="" width="600px"
height="600px">
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
url: 'https://img2.woyaogexing.com/2023/02/13/0253c158c222e0db0ea0bf68df21d315.jpeg',
url_list: [
'https://img.lesmao.vip/k/1178/T/XIAOYU/951/951_001_dj7_3600_5400.jpg',
'https://img.lesmao.vip/k/1178/T/XiuRen/6211/6211_001_k4r_3600_5400.jpg',
'https://img.lesmao.vip/k/1178/T/XiuRen/6211/6211_004_g66_3600_5400.jpg',
'https://img.lesmao.vip/k/1178/T/XiuRen/6165/6165_001_gwy_3600_5400.jpg',
'https://img.lesmao.vip/k/1178/T/XIAOYU/948/948_020_xcx_3600_5400.jpg',
]
},
methods: {
'handleClick': function () {
var i = Math.round(Math.random() * (this.url_list.length - 1))
this.url = this.url_list[i]
console.log(i)
var _this=this
setInterval(function () {
console.log(_this)
var i = Math.round(Math.random() * (_this.url_list.length - 1))
_this.url = _this.url_list[i]
console.log(i)
}, 1000)
},
简写成
handleClick() {
var _this = this
setInterval(function () {
console.log(_this)
var i = Math.round(Math.random() * (_this.url_list.length - 1))
_this.url = _this.url_list[i]
console.log(i)
}, 1000)
},
}
})
es 6 的对象写法
var hobby = ['篮球', '足球']
var f = function (a, b) {
console.log('匿名函数')
console.log(a + b)
}
var d={'name':"lqz",age:19,'hobby':hobby}
var d={'name':"lqz",age:19,hobby:hobby}
var d = {'name': "lqz", age: 19, hobby} es6 的简写形式
var d = {'name': "lqz", age: 19, f} es6 的简写形式
var d = {'name': "lqz", age: 19, handleClick(){
console.log('xxxxx')
}} es6 的简写形式
console.log(d)
d.handleClick()
</script>
</html>
5.class和style
本身他俩都是属性指令，但是他们比较特殊，应用更广泛，单独再讲
class：推荐用数组
:class='变量'
变量可以是字符串，数组，对象
style：推荐用对象
:style='变量'
变量可以是字符串，数组，对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<style>
.font {
font-size: 60px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.font-color {
color: yellow;
}
</style>
</head>
<body>
<div id="app">
<h1>clss</h1>
<div :class="class_obj">我是div</div>
<h1>style</h1>
<div :style="style_obj">我是style-----div</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
class_str:'font',
class_list:['font'], 推荐
class_obj: {font: true, green: false, 'font-color': false},
style_str: 'color: green;font-size:80px',
style_list: [{color:'yellow'}, {'font-size':'90px'}],
style_list: [{color: 'yellow'}, {fontSize: '90px'}], 可以用驼峰
style_obj: {color: 'yellow', fontSize: '80px'}
style_obj: {color: 'yellow', 'font-size': '80px'}
},
})
</script>
</html>
6.条件渲染
v-if=条件 放在标签上，如果条件成立，该标签就现实，如果条件不成立，该标签就不显示
v-else-if=条件 放在标签上，如果条件成立，该标签就现实，如果条件不成立，该标签就不显示
v-else 放在标签上，上面条件都不成立，显示这个标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="app">
<h1>通过分数显示文字</h1>
<div v-if="score>=90">优秀</div>
<div v-else-if="score>=80&&score<90">良好</div>
<div v-else-if="score>=60&&score<80">及格</div>
<div v-else>不及格</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
score: 99
},
})
</script>
</html>
7.列表渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
<div id="app">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="text-center">
<h1>v-if+v-for 显示购物车</h1>
<button @click="handleClick" class="btn btn-danger">点我显示</button>
</div>
<div v-if="show">
<table class="table table-hover">
<thead>
<tr>
<th>id</th>
<th>商品名</th>
<th>商品价格</th>
</tr>
</thead>
<tbody>
<tr v-for="item in good_list">
<th scope="row">{{item.id}}</th>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
show: false,
good_list: [
{id: 1, name: '钢笔', price: '29'},
{id: 2, name: '铅笔', price: '29'},
{id: 3, name: '文具盒', price: '298'},
{id: 4, name: '彩笔', price: '298'},
]
},
methods: {
handleClick() {
this.show = !this.show
},
}
})
</script>
</html>