标签：02 style Vue url 标签 app list var
Vue
1.插值语法
- 插值语法中可以放：
- 变量，对象取值，数组取值
- 简单的js语法
- 函数 （function（））
- 插值语法不能写在标签的属性中，只能写在标签的内部
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div>
<div id="app">
<h3>字符串</h3>
<p>姓名：{{ name }}</p>
<p>年龄：{{age}}</p>
<h3>数组</h3>
<p>爱好：{{hobby}}</p>
<p>爱好：{{hobby[2]}}</p>
<h3>对象</h3>
<p>身份信息：{{info}}----- 年龄：{{info.age}} ----{{info['age']}}</p>
<h3>运算</h3>
<p>运算：{{10*3+2}}</p>
<h3>三目运算</h3>
<p>【条件? '符合'：'不符合'】{{10>8? '大于':'小于'}}</p>
<h3>标签（默认是不会渲染成标签的）：</h3>
<p>{{url_a}}</p>
</div>
</div>
</body>
<script>
var vm = new Vue({
el:'#app',
data:{ // data中是定义的白能量，以后直接从VM实例值就能拿到
name:'小可爱',
age:18,
hobby:['篮球','阅读','画画'],
info:{name:'小鱼',age:'19'},
url_a:'<a href="http://www.baidu.com">百度</a>'
}
})
</script>
</html>
![image-20230214144830224]()
文本指令
- 文本指令写法
v-xx='' 在原来的插值语法中能写的，它都能写，不需要加上{{}}
# 指令系统：Vue提供的 v-xx 写在标签属性上的这个统称为：
系统指令
例如：<p v-text="a_url"></p> ，a_url必须是data中定义的变量
常见的指令：
#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;" 在标签中加上style属性
# v-if 等同于是布尔值，该标签是显示，是否需要显示。
整个标签都直接删除，效率较低，使用的是在虚拟中的DOM操作删除标签
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p v-text="a_url"></p>
<p v-html="a_url"></p>
<img v-show="show" src="https://img1.baidu.com/it/u=3909716200,3444137020&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=800" alt="">
<div v-if="show_if">
<img src="https://img1.baidu.com/it/u=3909716200,3444137020&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=800" alt="">
</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>
属性指令
- 属性指令就是添加在属性上的指令
- 通过标签绑定变量，以后变量发生变化，属性的值就跟着变
一些常见的属性：
href，src，name，style，width，height
语法操作：
语法：
v-bind：属性名='变量名'
简写：
：属性名='变量名'
事件指令
语法：
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）的执行
简写：
@事件名='函数'
ps：
1.在methods配置项中写成下面这种形式；（这是es6 的对象写法）
handleClick() {}
如果函数中再套的有函数，如果不是箭头函数，this 指向是有问题的，需要在嵌套的函数外面定义一下
var _this=this
# 点击按钮，随机切换图片
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="handleClik">点击切换图片</button>
<div>
<img :src="url" alt="" width="400px" height="400px">
</div>
</div>
</body>
<script>
var vm=new Vue({
el:'#app',
data:{
url:'https://img0.baidu.com/it/u=1332712130,3716719298&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
url_list:[
'https://img1.baidu.com/it/u=2281720291,2783216291&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889',
'https://img1.baidu.com/it/u=3653069921,468582353&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500',
'https://img0.baidu.com/it/u=1225258561,1848977140&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
'https://img0.baidu.com/it/u=4200967607,2839076937&fm=253&fmt=auto&app=120&f=JPEG?w=332&h=499',
'https://img0.baidu.com/it/u=1378373671,2406487365&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
],
},
methods: {
// 'handleClik': function () {
// // var i = Math.round(Math.random() * (this.url_list.length - 1))
// // this.url = this.url_list[i]
// var _this = this
// setInterval(function () {
// var i = Math.round(Math.random() * (_this.url_list.length - 1))
// _this.url = _this.url_list[i]
// }, 1000)
// },
//简写方式：
handleClik(){
var _this=this
setInterval(function () {
var i =Math.round(Math.random()*(_this.url_list.length -1))
_this.url=_this.url_list[i]
},1000)
}
}}
)
</script>
</html>
class 和 style
本身他俩都是属性指令，但是他们比较特殊，应用更广泛，
# class :推荐用数组
：class="变量"
变量可以是字符串，数组，对象
# style ：推荐使用对象
：style："变量"
变量可以是字符串，数组，对象
<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>
条件渲染
# v-if =条件，放在标签上，如果条件成立，如果条件成立，该标签就显示，如果条件不成立，该标签就不显示
# v-else-if=条件 放在标签上，如果条件成立，该标签就显示，如果条件不成立，该标签就不显示
# v-else 放在标签上，上面条件都不成立，显示这个标签
<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>
列表渲染
<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>
标签：02,
style,
Vue,
url,
标签,
app,
list,
var
From： https://www.cnblogs.com/qiguanfusu/p/17120567.html