文档章节

Vue模板语法(一)

o
 osc_g8254g7s
发布于 2019/08/19 18:57
字数 1376
阅读 5
收藏 0

精选30+云产品,助力企业轻松上云!>>>

Vue模板语法

一.插值

1.1.1 文本
{{msg}}
1.1.2 html
使用v-html指令用于输出html代码
1.1.3 属性
HTML属性中的值应使用v-bind指令
1.1.4 表达式
Vue提供了完全的JavaScript表达式支持
{{str.substr(0,6).toUpperCase()}}
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
<li v-bind:id="'list-' + id">我的Id是js动态生成的</li>

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>vue插值</title>
 6         <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
 7             </head>
 8             <body>
 9                 <div id="app">
10                     <ul>
11                         
12                         <li>
13                             <h3>文本</h3>
14                                {{msg}}
15                         </li>
16                         <li>
17                             <h3>Html字符串渲染</h3>
18                              <div v-html="htmlSter"></div>
19                         </li>
20                         <li>
21                             <h3>v-bind属性绑定</h3>
22                              <input type="text" value="18" />
23                              <input type="text" v-bind:value="age" />
24                         </li>
25                         <li>
26                             <h3>表达式</h3>
27                                {{str.substr(0,6).toUpperCase()}}
28                                        {{ number + 1 }}
29                                        {{ ok ? 'YES' : 'NO' }}
30                                        <li v-bind:id="'list-' + id">我的Id是js动态生成的</li>
31                         </li>
32                     </ul>
33                 </div>        
34             </body>
35             <script type="text/javascript">            
36                 new Vue({
37                     el:'#app',
38                     data:{
39                         msg:'Hollo Vue!!!',
40                         htmlSter:'<span style="color: red;">Html字符串渲染</span>',
41                         age:20,
42                         str:'https://www.baidu.com',
43                         number:6,
44                         ok:true,
45                         id:16
46                     }
47                 })        
48             </script>
49         </html>
50

二.指令

 指的是带有“v-”前缀的特殊属性

 

1.2.1 核心指令
(v-if|v-else|v-else-if)/v-show/v-for/v-bind/v-on/v-model/v-if|v-else|v-else-if:根据其后表达式的bool值进行判断是否渲染该元素他们只能是兄弟元素

v-else-if上一个兄弟元素必须是v-if
v-else上一个兄弟元素必须是v-if或者是v-else-if

 

v-show:与v-if类似,只是会渲染其身后表达式为false的元素,而且会给这样的元素添加css代码:style="display:none"

 

v-for:类似JS的遍历,
遍历数组: v-for="item in items", items是数组,item为数组中的数组元素
遍历对象: v-for="(value,key,index) in stu", value属性值,key属性名,index下标

 

v-bind
v-on
v-model:用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定,根据表单上的值,自动更新绑定的元素的值
v-for/v-model一起绑定[多选]复选框和单选框

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>vue指令</title>
 6         <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
 7             </head>
 8             <body>
 9                 <div id="app">
10                     <ul>                    
11                         <li>
12                             <h3>分支</h3>
13                             <div v-if="score > 90">A</div>
14                             <div v-else-if="score > 70">B</div>
15                             <div v-else-if="score > 60">C</div>
16                             <div v-else-if="score < 50">D</div>
17                             <div v-else=" "></div>
18                                <input type="text" v-model="score" />
19                         </li>
20                         <!-- 分清楚v-fi跟v-show的区别 -->
21                         <!-- v-if:控制的是标签是否打印 
22                              v-show:控制的是标签的样式
23                         -->                        
24                         <li>
25                             <h3>v-show指令</h3>
26                             <div v-show="flag">hollo</div>
27                             <div v-if="flag">hollo !!!</div>
28                         </li>
29                         <li>
30                             <h3>v-for指令</h3>
31                             <div v-for="item,index in data1">
32                                 {{item}}~{{index}}<br />                                                                                
33                             </div>
34                             <hr />
35                             <div v-for="item,index in data2">
36                                 {{item.id}}~{{item.name}}~{{index}}<br />                                                                                
37                             </div>
38                         </li>
39                         <li>
40                             <h3>动态参数</h3>
41                             <button v-on:[evname]="xxx">动态参数</button>
42                             <input type="text" v-model="evname" />
43                         </li>
44                     </ul>
45                 </div>        
46             </body>
47             <script type="text/javascript">            
48                 new Vue({
49                     el:'#app',
50                     data:{
51                         score:88,
52                         flag:false,
53                         data1:[1,3,6,9,11],
54                         data2:[{
55                             id:1,
56                             name:'!!!'
57                             },
58                             {
59                                 id:2,
60                                 name:'......'
61                                 },
62                                 {
63                                     id:3,
64                                     name:'。。。'
65                                     }
66                             ],
67                             evname:'click'
68                         
69                     },
70                     methods:{
71                         xxx(){
72                             console.log('方法被调用!!!')
73                         }
74                     }
75                 })        
76             </script>
77         </html>
78

三. 过滤器

全局过滤器
Vue.filter('filterName', function (value) {
// value 表示要过滤的内容
});
局部过滤器
new Vue({
filters:{'filterName':function(value){}}
});

vue允许你自定义过滤器,被用作一些常见的文本格式化,格式如下:
<!-- 在两个大括号中 -->
{{ name | capitalize }}

<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>
注1:过滤器函数接受表达式的值作为第一个参数
注2:过滤器可以串联
{{ message | filterA | filterB }}
注3:过滤器是JavaScript函数,因此可以接受参数:
{{ message | filterA('arg1', arg2) }}

注4:js定义一个类
function Stu(){};
Stu.prototype.add(a,b){};//添加一个新的实例方法
Stu.update(a,b){};//添加一个新的类方法

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>vue过滤器</title>
 6         <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
 7             </head>
 8             <body>
 9                 <div id="app">
10                     <ul>                    
11                         <li>
12                             <h3>局部过滤器注册</h3>
13                             {{msg}}<br />
14                             {{msg | a}}<br />
15                             {{javax1 | a}}<br />
16                         </li>
17                         <li>
18                             <h3>局部过滤器串联</h3>
19                             {{javax1 | a | b}}
20                         </li>
21                         <li>
22                             <h3>全局过滤器注册</h3>
23                             {{javax1 | c}}
24                         </li>
25                         
26                     </ul>
27                 </div>        
28             </body>
29             <script type="text/javascript">    
30                     Vue.filter(
31                     'c',function(v){
32                         console.log(v);
33                             return v.substring(10,16);
34                     }
35                     ),
36                 new Vue({
37                     el:'#app',
38                     data:{
39                     msg:'https://www.baidu.com',
40                     javax1:'https://www.javax1.com'
41                     },
42                     filters:{
43                         'a':function(v){
44                         console.log(v);
45                             return v.substring(0,16);
46                         },
47                         'b':function(v){
48                         console.log(v);
49                             return v.substring(5,10);
50                         }
51                     }
52                 })        
53             </script>
54         </html>
55

四.计算机属性与监听属性

4. 计算属性
计算属性可用于快速计算视图(View)中显示的属性。这些计算将被缓存,并且只在需要时更新
computed:{}

5. 监听属性
监听属性 watch,我们可以通过 watch 来响应数据的变化
watch:{}

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>Vue计算监听</title>
 6         <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
 7     </head>
 8     <body>
 9         <div id="app">
10             <ul>
11                 <li>
12                     <h3>计算属性</h3>
13                     单价:<input v-model="price" />
14                     数量:<input v-model="num" />
15                     总价: {{total}}
16                 </li>
17                 <li>
18                     <h3>监听属性</h3>
19                     km:<input v-model="km"/>
20                     m:<input v-model="m" />
21                 </li>
22             </ul>
23         </div>        
24     </body>
25     <script type="text/javascript">
26         new Vue({
27             el:'#app',
28             data:{
29                 price:15,
30                 num:1,
31                 km:1,
32                 m:1000
33             },
34             computed:{
35                 total(){
36                     return parseInt(this.price) * parseInt(this.num);
37                 }
38             },
39             watch:{
40                 km(v){
41                     this.m = v * 1000;
42                 },
43                 m(v){
44                     this.km = v/1000;
45                 }
46             }
47         })        
48     </script>
49 </html>

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

SikuliX简介及安装

一、简单介绍 SikuliIDE和Sikuli Script就是现在的SikuliX,最新版本是SikuliX1.1.0, 部分兼容Sikuli JAVA API,支持Python和Ruby,SikuliX通过定位图像和键盘鼠标来操作GUI(图形化用户界面...

osc_r5t7sskd
48分钟前
6
0
Above the Median

Above the Median 农夫约翰把他的N(1 <= N <= 100,000)奶牛排在一排来衡量他们的高度,牛i有:高度H_I(1 <= H_I <= 1,000, 000,000)纳米 – 因为FJ认为他需要精确测量!他想选择一些连续...

osc_3k29rnjy
50分钟前
6
0
Above the Median

Above the Median 农夫约翰把他的N(1 <= N <= 100,000)奶牛排在一排来衡量他们的高度,牛i有:高度H_I(1 <= H_I <= 1,000, 000,000)纳米 – 因为FJ认为他需要精确测量!他想选择一些连续...

osc_8nnvoyb1
51分钟前
9
0
python3连接mysql 稍微进阶 + 日期处理

1.踩了个操作中文的坑,结果发现之前的文章中有强调了,在连接处加:charset="utf8" conn = pymysql.connect(host = '127.0.0.1', unix_socket = '/tmp/mysql.sock', user = 'root' , passwo......

osc_fipgtxy8
52分钟前
6
0
Above the Median

Above the Median 农夫约翰把他的N(1 <= N <= 100,000)奶牛排在一排来衡量他们的高度,牛i有:高度H_I(1 <= H_I <= 1,000, 000,000)纳米 – 因为FJ认为他需要精确测量!他想选择一些连续...

osc_cj3zzdzw
53分钟前
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部