如何在Vue.js中更改分隔符? [英] How to change delimiters in Vue.js?
本文介绍了如何在Vue.js中更改分隔符?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在Laravel和Vue.js中进行一个项目.当我使用诸如 {{var_name}} 之类的Vue.js语法时，由于Laravel分隔符也是 {{}} ，所以会出现错误.如何更改Vue.js的分隔符，以使其与Laravel不冲突?
I am working on a project in Laravel and Vue.js. When I use Vue.js syntax like {{var_name}}, I get an error because the Laravel delimiter is also {{ }}. How can I change the delimiter for Vue.js so that it doesn't conflict with Laravel?
这是我用于 layout.app.blade.php 的代码:
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="{{ asset('js/vue.min.js') }}"></script>
<link rel="stylesheet" href="{{asset('js/style.css') }}">
</head>
<body>
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
@if (Auth::guest())
<li><a href="{{ route('login') }}">Login</a></li>
<li><a href="{{ route('register') }}">Register</a></li>
@else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
@endif
</ul>
</div>
</div>
</nav>
@yield('content')
</div>
<!-- Scripts -->
<script src="{{ asset('js/grid/grid.js') }}"></script>
</body>
</html>
以及我主页的代码:
@extends('layouts.app')
@section('content')
<link rel="stylesheet" href="{{asset('js/style.css')}}">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Dashboard</div>
<div class="panel-body">
@if (session('status'))
<div class="alert alert-success">
{{ session('status') }}
</div>
@endif
<div id="app">
<div class="container col-lg-offset-4 col-lg-4">
<br>
<div class="row">
<!-- component template -->
<script type="text/x-template" id="grid-template">
<table v-if="filteredData.length">
<thead>
<tr>
<th v-for="key in columns"
@click="sortBy(key)"
:class="{ active: sortKey == key }">
{{ key | capitalize }}
<span class="arrow" :class="sortOrders[key] > 0 ? 'asc' : 'dsc'">
</span>
</th>
</tr>
</thead>
<tbody>
<tr v-for="entry in filteredData">
<td v-for="key in columns">
{{entry[key]}}
</td>
</tr>
</tbody>
</table>
<p v-else>No matches found.</p>
</script>
<!-- demo root element -->
<div id="demo">
<form id="search">
Search <input name="query" v-model="searchQuery">
</form>
<demo-grid
:data="gridData"
:columns="gridColumns"
:filter-key="searchQuery">
</demo-grid>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
<script src="{{ asset('js/grid/grid.js') }}"></script>
推荐答案
要更改vue.js中的定界符，请像这样使用
To change delimiters in vue.js, use like this
new Vue({
delimiters: ['{%', '%}'],
}
详细了解vuejs文档中的定界符
Explode more about delimiters in vuejs docs
var data = {
message: 'Hello Vue.js!'
}
var demo = new Vue({
el: '#demo',
delimiters: ['{%', '%}'],
data: data
});<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="demo">
<p> {% message %} </p>
<input v-model="message">
</div>这篇关于如何在Vue.js中更改分隔符?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
