vue模板语法上

最新推荐文章于 2023-05-23 18:03:09 发布

欣宇不会敲代码

最新推荐文章于 2023-05-23 18:03:09 发布

阅读量504

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/leixinyuya/article/details/121046361

版权

一、插值

1、文本{{msg}}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    </head>
    <body>
        <!-- 定义边界 -->
        <div id="app">
            <h3>{{msg}}</h3>
        </div>
    </body>
    
    <script type="text/javascript">
        <!-- 绑定边界 -->
        new Vue({
            el:'#app',
            data() {
                return {msg:'vue你大爷'};
            }
        })
    </script>
</html>

2、html

使用v-html指令用于输出html代码

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    </head>
    <body>
        <!-- 定义边界 -->
        <div id="app">
            <p>文本</p>
            <h3>{{msg}}</h3>
            <p>html串，显示带红色字体的内容</p>
            <div v-html="htmlstr"></div>
        </div>
    </body>

    <script type="text/javascript">
        <!-- 绑定边界 
        -->
        new Vue({
            el: '#app',
            data(){
                return{
                    msg: vue你大爷',
                    htmlstr:'<h3 style="color:red;">这是一个html片段</h3>',
            };
        }
        })
    </script>
</html>

3、属性

HTML属性中的值应该使用v-bind指令

所有原生态的属性要利用vue的变量，都需要在对应的属性前加v-bind

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    </head>
    <body>
        <!-- 定义边界 -->
        <div id="app">
        <p>文本</p>
            <h3>{{msg}}</h3>
        <p>html串，显示带红色字体的内容</p>
            <div v-html="htmlstr"></div>
        <p>vue中的属性</p>
            <a v-bind:href="hrefstr">百度</a>
            <input v-bind:value="valuestr" />

            <!-- 缩写方式 -->
            <!-- <input :value="valuestr" /> -->
        </div>
    </body>

    <script type="text/javascript">
        <!-- 绑定边界 
        -->
        new Vue({
            el: '#app',
            data(){
                return{
                    msg: '欢迎幻影',
                    htmlstr:'<h3 style="color:red;">这是一个html片段</h3>',
                    hrefstr:'http://www.baidu.com',
                    valuestr:"6666"
            };
        }
        })
    </script>
</html>

4、表达式

Vue提供了完全的JavaScript表达式支持

<li v-bind:id="'list-' + id">我的Id是js动态生成的</li>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    </head>
    <body>
        <!-- 定义边界 -->
        <div id="app">
        <p>文本</p>
            <h3>{{msg}}</h3>
        <p>html串，显示带红色字体的内容</p>
            <div v-html="htmlstr"></div>
        <p>vue中的属性</p>
            <a v-bind:href="hrefstr">百度</a>
            <input v-bind:value="valuestr" />
            <!-- v-bind:value缩写方式 -->
            <!-- <input :value="valuestr" /> -->
        <p>表达式</p>
            <p>截取字符串并转大写</p>
            {{str.substring(0,4).toUpperCase()}}
            <p>数值相加</p>
            张三:{{number+1}}
            <p>判断</p>
            {{ok ? 'yes':'no'}}
            <p>动态生成id</p>
            <span :id="'goodsid_id_'+id">goodmorning</span>
        </div>
    </body>

    <script type="text/javascript">
        <!-- 绑定边界 
        -->
        new Vue({
            el: '#app',
            data(){
                return{
                    msg: '欢迎雷臭屁',
                    htmlstr:'<h3 style="color:red;">html片段</h3>',
                    hrefstr:'http://www.baidu.com',
                    valuestr:"6666",
                    str:'java is very good',
                    number:52,
                    ok:true,
                    id:02
            };
        }
        })
    </script>
</html>

二、指令

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

1、核心指令

v-if v-else v-else-if：根据表达式的bool值进行判断是否渲染该元素

他们只能是兄弟元素

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

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    </head>
    <body>
        <!-- 定义边界 -->
        <div id="app">
            <p> v-if|v-else|v-else-if</p>
                    分数:<input v-model="score" />
                    <div v-if="score>80">优秀</div>
                    <div v-else-if="score>60">良好</div>
                    <div v-else="score<60">继续加油</div>

        <p>v-show</p>
                <div v-show="score>90">v-show-上优秀学员名单</div>
                <div v-if="score>90">v-if-上优秀学员名单</div>
        </div>
    </body>
    
    <script type="text/javascript">
        <!-- 绑定边界 -->
        new Vue({
            el:'#app',
            data() {
                return {
                    score:61
                };
            }
        })
    </script>
</html>

用户输入款里输入的数字判断成绩优良差

v-if连div代码都不存在了，v-show只是display隐藏住了

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

2、v-for

类似js代码

遍历数组：v-for="item in item",item是数组，item为数组中的元素

遍历对象：v-for="(value,key,index)in stu",value属性值，key属性名，index下标

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    </head>
    <body>
        <!-- 定义边界 -->
        <div id="app">
          <p>v-for</p>    
               <select v-model="hobbySelected">
                    <option v-for="h in hobby" :value="h.id">{{h.name}}</option>
                </select>
                <input v-model="hobbySelected" />
        </div>
    </body>
    
    <script type="text/javascript">
        <!-- 绑定边界 -->
        new Vue({
            el:'#app',
            data() {
                return {
            hobby:[
                {id:"1",name:"吃饭饭"},
                {id:"2",name:"睡觉觉"},
                {id:"3",name:"打豆豆"}
            ],
                    hobbySelected:2
                };
            }
        })
    </script>
</html>

复选框

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    </head>
    <body>
        <!-- 定义边界 -->
        <div id="app">
           <p>v-for</p>    
                <div v-for="h in hobby">
                <input  :value="h.id" type=checkbox />{{h.name}}
                </div>
        </div>
    </body>
    
    <script type="text/javascript">
        <!-- 绑定边界 -->
        new Vue({
            el:'#app',
            data() {
                return {
                    score:78,
                    hobby:[
                        {id:"1",name:"唱歌"},
                        {id:"2",name:"跳舞"},
                        {id:"3",name:"打游戏"}
                    ],
                                 };
            }
        })
    </script>
</html>

3、v-on

触发事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    </head>
    <body>
        <!-- 定义边界 -->
        <div id="app">
            <p>v-if|v-else|v-else-if</p>
            分数: <input v-model="score" />
            <div v-if="score>80">优秀</div>
            <div v-else-if="score>60">良好</div>
            <div v-else="score<60">还需努力</div>
            
            <p>v-show</p>
            <div v-show="score>90">v-show:上优秀学员名单</div>
            <div v-if="score>90">v-if:上优秀学员名单</div>
            
            <p>v-for</p>
            <select v-model="hobbySelected">
                <option v-for="h in hobby" :value="h.id">{{h.name}}</option>
            </select>
            <div v-for="h in hobby">
            <input :value="h.id" type="checkbox" />{{h.name}}
            </div>
            <p>v-on</p>
            <button v-on:click="handle">触发事件</button>
            <button @click="handle">触发事件lxy</button>
            <!-- <input v-model="hobbySelected"/> -->
        </div>
        </body>
        <script type="text/javascript">
        <!-- 绑定边界 --> 
        new Vue({
            el:'#app',
            data(){
                return{
               //ctrl+k格式化
            score:78,
            hobby:[
                {id:"1",name:"吃饭饭"},
                {id:"2",name:"睡觉觉"},
                {id:"3",name:"打豆豆"}
            ],
            hobbySelected:3
              };
            },
            methods:{
                handle(){
                    alert("触发事件");
                }
            }
        })
        
        </script>
    
</html>

四、过滤器

1、全局过滤器

Vue.filter('filterName', function (value) {
// value 表示要过滤的内容
});

2、局部过滤器

new Vue({
filters:{'filterName':function(value){}}
});

3、串联

4、过滤器可以传参

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    </head>
    <body>
        <!-- 定义边界 -->
        <div id="app">
            {{msg|all}},{{msg|single}},{{msg|all|single}},{{msg|param(4,5)}}
        </div>
    </body>
    
    <script type="text/javascript">
    //全局过滤器
        Vue.filter('all', function (value) {
             return value.substring(2,4);
           });
        <!-- 绑定边界 -->
        new Vue({
            el:'#app',
            data() {
                return {
                    msg:"开开心心，快快乐乐"
                };
            },
            // 局部过滤
            filters:{
                'single':function(val){
                    return val.substring(3,8);
                },
                'param':function(val,start,end){
                    return val.substring(start,end);
                }
            }
        })
    </script>
</html>

五、计算属性和监听属性

区别：

监听属性必须在变量中定义

计算属性是变量当方面影响另一方面，监听属性是互相影响

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    </head>
    <body>
        <!-- 定义边界 -->
        <div id="app">
            <p>计算属性</p>
            <table border="1" style="width: 600px;height: 300px;">
                <tr>
                    <td>帽子</td>
                    <td>30</td>
                    <td>
                        <input v-model="maozi" />
                    </td>
                    <td>
                        {{maoziTotal}}
                    </td>
                </tr>
                <tr>
                    <td>衣服</td>
                    <td>68</td>
                    <td>
                        <input v-model="yifu" />
                    </td>
                    <td>
                        {{yifuTotal}}
                    </td>
                </tr>
                <tr>
                    <td>裤子</td>
                    <td>89</td>
                    <td>
                        <input v-model="kuzi" />
                    </td>
                    <td>
                        {{kuziTotal}}
                    </td>
                </tr>
                <tr>
                    <td>总价</td>
                    <td colspan="3">{{total}}</td>
                </tr>
            </table>
        <p>监听属性</p>
            千米:<input v-model="km" />
            米:<input v-model="m" />
        </div>
    </body>
    
    <script type="text/javascript">
           <!-- 绑定边界 -->
        new Vue({
            el:'#app',
            data() {
                return {
                    maozi:1,
                    yifu:1,
                    kuzi:1,
                    km:2,
                    m:2000
                };
            },
            methods:{
                handle(){
                    alert("触发事件");
                }
            },
            // 计算属性
             computed:{
                 maoziTotal(){
                     return this.maozi*30;
                 },
                 yifuTotal(){
                     return this.yifu*68;
                 },
                 kuziTotal(){
                      return this.kuzi*89;
                 },
                 total(){
                     return this.maoziTotal+this.yifuTotal+this.kuziTotal;
                 }
             },
             // 监听属性
             watch:{
                 // v指的是m变量
                 m(v){
                     this.km=parseInt(v)/1000
                 },
                 // v指的是km变量
                 km(v){
                     this.m=parseInt(v)*1000
                 }
             }
        })
    </script>
</html>

欣宇不会敲代码

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue模板语法上

一、插值1、文本{{msg}}<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> </head&g
复制链接

扫一扫